FlowchartToJson

<h3 align="left"> <img src="pics/icon.png" height="300px"/> </h3> <h1>FigJam flowchart diagram to JSON</h1>

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 and try it out here. 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!

API

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.