Back to Plugins
Flowchart to JSON

Flowchart to JSON

Generate graph like JSON out of flowchart diagram

nodecyclicfigma-to-codeedgesparserflowchartjsongraphapi

Plugin Preview

Flowchart to JSON preview

About this plugin

FigJam flowchart diagram to JSON


Select the root element, and run the plugin. It will generate a JSON representation of the graph interpretation of 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.


View the code on github


Usage


Select a root node and run the plugin. It will copy the JSON to your clipboard, if possible. Coping to clipboard is a bit flaky and may be restricted by your environment in some way. As a fallback, when the automatic copying fails, a window will open displaying the JSON as plain text.


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

The starting point is always a Node.


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}
}


Contribute

Please feel free to write a comment, if you experience an issue or have an idea. You may also view the code on github and propose changes.

Plugin Details

Version2
CreatedJuly 2, 2023
Last UpdatedAugust 4, 2024
CategoryImport & export plugins
CreatorMaximilian Mairinger
Stats236 installs, 18 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:index.html
  • main:code.js
  • Editor Types:
    figjam
  • Allowed Domains:
    • none