lint & format
This commit is contained in:
dwelle
@@ -2,6 +2,6 @@
|
||||
|
||||
The Codebase is divided into 2 Sections
|
||||
|
||||
* [How Parser Works under the hood](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser) - If you are interested in understanding and deep diving into inner workings of the Parser, then make sure to checkout this section.
|
||||
- [How Parser Works under the hood](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser) - If you are interested in understanding and deep diving into inner workings of the Parser, then make sure to checkout this section.
|
||||
|
||||
* [Adding a new diagram type](/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type) - If you want to help us make the mermaid to Excalidraw Parser more powerful, you will find all information in this section to do so.
|
||||
- [Adding a new diagram type](/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type) - If you want to help us make the mermaid to Excalidraw Parser more powerful, you will find all information in this section to do so.
|
||||
|
||||
@@ -10,7 +10,7 @@ lets run the playground server in local :point_down:
|
||||
yarn start
|
||||
```
|
||||
|
||||
This will start the playground server in port `1234` and open it in browser so you start playing with the playground.
|
||||
This will start the playground server in port `1234` and open it in browser so you start playing with the playground.
|
||||
|
||||
## Update Supported Diagram Types
|
||||
|
||||
@@ -26,13 +26,13 @@ For this create a file named `{{diagramType}}.ts` in [`src/parser`](https://gith
|
||||
|
||||
The main aim of the parser is :point_down:
|
||||
|
||||
1. Determine how elements are connected in the diagram and thus finding arrow and text bindings.
|
||||
1. Determine how elements are connected in the diagram and thus finding arrow and text bindings.
|
||||
|
||||
For this you might have to dig in to the parser `diagram.parser.yy` and which attributes to parse for the new diagram.
|
||||
|
||||
2. Determine the position and dimensions of each element, for this would be using the `svg`
|
||||
|
||||
Once the parser is ready, lets start using it.
|
||||
Once the parser is ready, lets start using it.
|
||||
|
||||
Add the diagram type in switch case in [`parseMermaid`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L97) and call the parser for the same.
|
||||
|
||||
@@ -51,4 +51,3 @@ Thats it, you have added the new diagram type 🥳, now lets test it out!
|
||||
2. Incase the new diagram type added is present in [`unsupported.ts`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/playground/testcases/unsupported.ts) then remove it from there.
|
||||
|
||||
3. Verify if the test cases are running fine in playground.
|
||||
|
||||
|
||||
@@ -8,12 +8,10 @@ In this section we will be diving into how the [flowchart parser](https://github
|
||||
|
||||
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](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/diagrams/flowchart/flowDb.js#L768), 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](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38).
|
||||
|
||||
|
||||
For computing `vertices` and `edge`s 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.
|
||||
@@ -42,9 +40,10 @@ Considering the same example this is the response from the API
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
The dimensions and position is missing in this response and we need that to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38), for this we have our own parser [`parseVertex`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L178) 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 :point_down:
|
||||
The final output from `parseVertex` looks like :point_down:
|
||||
|
||||
```js
|
||||
{
|
||||
@@ -73,57 +72,55 @@ The dimensions and position is missing in this response and we need that to tran
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 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
|
||||
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
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
"start": "start",
|
||||
"end": "stop",
|
||||
"type": "arrow_point",
|
||||
"text": "",
|
||||
"labelType": "text",
|
||||
"stroke": "normal",
|
||||
"length": 1
|
||||
}
|
||||
]
|
||||
{
|
||||
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`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L245) takes the above response along with `svg` and computes the position, dimensions and cleans up the response.
|
||||
|
||||
The final output from `parseEdge` looks like :point_down:
|
||||
The final output from `parseEdge` looks like :point_down:
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
"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
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
{
|
||||
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.
|
||||
@@ -132,46 +129,35 @@ Lets consider the below example :point_down:
|
||||
|
||||
|
||||
|
||||
We use `getSubgraphs` API to get the subgraph data for a given flowchart.
|
||||
Considering the same example this is the response from the API
|
||||
We use `getSubgraphs` API to get the subgraph data for a given flowchart. Considering the same example this is the response from the API
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
"id": "one",
|
||||
"nodes": [
|
||||
"flowchart-a2-1399",
|
||||
"flowchart-a1-1400"
|
||||
],
|
||||
"title": "one",
|
||||
"classes": [],
|
||||
"labelType": "text"
|
||||
}
|
||||
]
|
||||
{
|
||||
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`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L139) takes the above response along with `svg` and computes the position, dimensions and cleans up the response.
|
||||
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
"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"
|
||||
}
|
||||
]
|
||||
```
|
||||
{
|
||||
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",
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
|
||||
[This](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/index.ts) is the entry point of the library.
|
||||
|
||||
|
||||
`parseMermaidToExcalidraw` function is the only function exposed which receives mermaid syntax as the input, parses the mermaid syntax and resolves to Excalidraw Skeleton.
|
||||
|
||||
Lets look at the high level overview at how the parse works :point_down:
|
||||
@@ -13,10 +12,10 @@ Lets dive deeper into individual section now to understand better.
|
||||
|
||||
## Parsing Mermaid diagram
|
||||
|
||||
One of the dependencies of the library is [`mermaid`](https://www.npmjs.com/package/mermaid) library.
|
||||
We need the mermaid diagram in some extractable format so we can parse it to Excalidraw Elements.
|
||||
One of the dependencies of the library is [`mermaid`](https://www.npmjs.com/package/mermaid) library. We need the mermaid diagram in some extractable format so we can parse it to Excalidraw Elements.
|
||||
|
||||
Parsing is broken into two steps
|
||||
|
||||
1. [`Rendering Mermaid to Svg`](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser#rendering-mermaid-to-svg) - This helps in determining the position and dimensions of each element in the diagram
|
||||
|
||||
2. [`Parsing the mermaid syntax`](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser#parsing-the-mermaid-syntax) - We also need to know how elements are connected which isn't possible with svg alone hence we also parse the mermaid syntax which helps in determining the connections and bindings between elements in the diagram.
|
||||
@@ -27,10 +26,8 @@ Parsing is broken into two steps
|
||||
|
||||
The [`mermaid`](https://www.npmjs.com/package/mermaid) library provides the API `mermaid.render` API which gives the output of the diagram in `svg`.
|
||||
|
||||
|
||||
If the diagram isn't supported, this svg is converted to `dataURL` and can be rendered as an image in Excalidraw.
|
||||
|
||||
|
||||
### Parsing the mermaid syntax
|
||||
|
||||
For this we first need to process the options along with mermaid defination for diagram provided by the user.
|
||||
@@ -57,9 +54,8 @@ If you want to understand how flowchart parser works, you can navigate to [Flowc
|
||||
|
||||
Now we have all the data, we just need to transform it to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38) API so it can be rendered in Excalidraw.
|
||||
|
||||
For this we have `converters` which takes the parsed mermaid data and gives back the Excalidraw Skeleton.
|
||||
For Unsupported types, we have already mentioned above that we convert it to `dataURL` and return the ExcalidrawImageSkeleton.
|
||||
For this we have `converters` which takes the parsed mermaid data and gives back the Excalidraw Skeleton. For Unsupported types, we have already mentioned above that we convert it to `dataURL` and return the ExcalidrawImageSkeleton.
|
||||
|
||||
For supported types, currently only flowchart, we have [flowchartConverter](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24) which parses the data and converts to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38).
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user