https://github.com/maximilianmairinger/flowcharttojson

Converts a FigJam flowchart to json
https://github.com/maximilianmairinger/flowcharttojson

api cyclic edges figjam figma flowchart graph json node parser plugin

Last synced: 7 months ago
JSON representation

Converts a FigJam flowchart to json

• Host: GitHub
• URL: https://github.com/maximilianmairinger/flowcharttojson
• Owner: maximilianMairinger
• Created: 2023-07-02T10:36:09.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-08-04T09:23:28.000Z (over 1 year ago)
• Last Synced: 2025-07-11T21:35:43.918Z (7 months ago)
• Topics: api, cyclic, edges, figjam, figma, flowchart, graph, json, node, parser, plugin
• Language: TypeScript
• Homepage: https://www.figma.com/community/plugin/1257283022168373227
• Size: 22.5 KB
• Stars: 13
• Watchers: 1
• Forks: 2
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  



FigJam flowchart diagram to JSON


![Flowchart to JSON Illustration](pics/header.png)

Select the root element, and run the plugin. It will generate a JSON representation of the graph interpretation the flowchart. There are two types of entities: `nodes` and `edges`, which model the relation of the flowchart elements. A Node is a, in this case a purple, box with text inside, and an edge is a line connecting the two nodes. All sorts of properties are stored on a node or edge, such as the text, the color and its connections.

## Usage

Install it on the [figma community](https://www.figma.com/community/plugin/1257283022168373227) and try it out [here](https://www.figma.com/file/uPuwak5XnvgpCehHTmDOqI/Untitled?type=whiteboard&t=7YEtTS0RuRqzHCyE-6). Select a root node and run the plugin. It will copy the JSON to your clipboard (if possible).

### Parsing

Note that the resulting JSON may be cyclic, by the nature of the flowchart. These kinds of JSONs can be parsed with the library [circ-json](https://www.npmjs.com/package/circ-json)!

## API

```typescript

interface Element {

  text: string;

  id: string;

  type: "NODE" | "EDGE",

}

interface Edge extends Element {

  from: Node,

  to?: Node,

  fromSide?: 'NONE' | 'AUTO' | 'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT',

  toSide?: 'NONE' | 'AUTO' | 'TOP' | 'LEFT' | 'BOTTOM' | 'RIGHT',

  color?: {r: number, g: number, b: number},

  edgeType: 'ELBOWED' | 'STRAIGHT',

  directional: "UNI" | "BI"

}

interface Node extends Element {

  edges: Edge[],

  color?: {r: number, g: number, b: number}

}

```

It will always start with a node.