Flowchart Parser

As mentioned in the previous section, we use getDiagramFromText to parse the full defination and get the Diagram json from it.

In this section we will be diving into how the flowchart parser works behind the scenes.

We use diagram.parser.yy attribute to parse the data. If you want to know more about how the diagram.parse.yy attribute looks like, you can check it here, however for scope of flowchart we are using 3 APIs from this parser to compute vertices, edges and clusters as we need these data to transform to ExcalidrawElementSkeleton.

For computing vertices and edges lets consider the below svg generated by mermaid

Computing the vertices

We use getVertices API from diagram.parse.yy to get the vertices for a given flowchart.

Considering the same example this is the response from the API

{
    "start": {
        "id": "start",
        "labelType": "text",
        "domId": "flowchart-start-1414",
        "styles": [],
        "classes": [],
        "text": "start",
        "props": {}
    },
    "stop": {
        "id": "stop",
        "labelType": "text",
        "domId": "flowchart-stop-1415",
        "styles": [],
        "classes": [],
        "text": "stop",
        "props": {}
    }
}

The dimensions and position is missing in this response and we need that to transform to ExcalidrawElementSkeleton, for this we have our own parser parseVertex which takes the above response and uses the svg together to compute position, dimensions and cleans up the response.

The final output from parseVertex looks like 👇

{
    "start": {
        "id": "start",
        "labelType": "text",
        "text": "start",
        "x": 0,
        "y": 0,
        "width": 67.796875,
        "height": 44,
        "containerStyle": {},
        "labelStyle": {}
    },
    "stop": {
        "id": "stop",
        "labelType": "text",
        "text": "stop",
        "x": 117.796875,
        "y": 0,
        "width": 62.3828125,
        "height": 44,
        "containerStyle": {},
        "labelStyle": {}
    }
}

Computing the edges

The lines and arrows are considered as edges in mermaid as shown in the above diagram. We use getEdges API from diagram.parse.yy to get the edges for a given flowchart. Considering the same example this is the response from the API

[
    {
        "start": "start",
        "end": "stop",
        "type": "arrow_point",
        "text": "",
        "labelType": "text",
        "stroke": "normal",
        "length": 1
    }
]

Similarly here the dimensions and position is missing and we compute that from the svg. The parseEdge takes the above response along with svg and computes the position, dimensions and cleans up the response.

The final output from parseEdge looks like 👇

[
    {
        "start": "start",
        "end": "stop",
        "type": "arrow_point",
        "text": "",
        "labelType": "text",
        "stroke": "normal",
        "startX": 67.797,
        "startY": 22,
        "endX": 117.797,
        "endY": 22,
        "reflectionPoints": [
            {
                "x": 67.797,
                "y": 22
            },
            {
                "x": 117.797,
                "y": 22
            }
        ]
    }
]

Computing the Subgraphs

Subgraphs is collection of elements grouped together. The Subgraphs map to grouping elements in Excalidraw.

Lets consider the below example 👇

We use getSubgraphs API to get the subgraph data for a given flowchart. Considering the same example this is the response from the API

[
    {
        "id": "one",
        "nodes": [
                "flowchart-a2-1399",
                "flowchart-a1-1400"
        ],
        "title": "one",
        "classes": [],
        "labelType": "text"
    }
]

For position and dimensions we use the svg to compute. The parseSubgraph takes the above response along with svg and computes the position, dimensions and cleans up the response.

[
    {
        "id": "one",
        "nodes": [
                "flowchart-a2-1399",
                "flowchart-a1-1400"
        ],
        "title": "one",
        "labelType": "text",
        "nodeIds": [
                "a2",
                "a1"
        ],
        "x": 75.4921875,
        "y": 0,
        "width": 121.25,
        "height": 188,
        "text": "one"
    }
]