d73cd14dfb
* docs: add mermaid docs * fix link * add development.mdx * add codebase * add parseEdge * add subgraph * convertors * tweaks * structure the codebase * add docs for new diagram type * decouple docs for flowchart parser * fix broken links * use diagram instead of chart * revert package.json * tweaks * point root folder of mermaid-to-excalidraw to installation * remove installation from sidebar children * fix link * update flowchart parser diagram * update parser overview diagram * update more diagrams * remove note about change in element stroke * update diagram * increase size limit for excalidraw production bundle * tweaks * add link * move codebase after introduction * dummy --------- Co-authored-by: dwelle <luzar.david@gmail.com>
43 lines
1.0 KiB
Plaintext
43 lines
1.0 KiB
Plaintext
# Installation
|
|
|
|
`@excalidraw/mermaid-to-excalidraw` is published to npm. This library is used in [excalidraw](https://excalidraw.com) to transform mermaid syntax to Excalidraw diagrams.
|
|
|
|
Using `npm`
|
|
|
|
```bash
|
|
npm install @excalidraw/mermaid-to-excalidraw
|
|
```
|
|
|
|
Using `yarn`
|
|
|
|
```bash
|
|
yarn add @excalidraw/mermaid-to-excalidraw
|
|
```
|
|
|
|
## Usage
|
|
|
|
Once the library is installed, its ready to use.
|
|
|
|
```js
|
|
import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
|
|
import { convertToExcalidrawElements} from "@excalidraw/excalidraw"
|
|
|
|
try {
|
|
const { elements, files } = await parseMermaid(diagramDefinition, {
|
|
fontSize: DEFAULT_FONT_SIZE,
|
|
});
|
|
// currently the elements returned from the parser are in a "skeleton" format
|
|
// which we need to convert to fully qualified excalidraw elements first
|
|
const excalidrawElements = convertToExcalidrawElements(elements);
|
|
|
|
// Render elements and files on Excalidraw
|
|
} catch (e) {
|
|
// Error handling
|
|
}
|
|
```
|
|
|
|
## Playground
|
|
|
|
Try it out [here](https://mermaid-to-excalidraw.vercel.app)
|
|
|