Skip to content

This plugin provides a utility method that converts Mermaid syntax into a scene graph for the canvas, see Lesson 32 - Text to diagram:

ts
import { parseMermaidToSerializedNodes } from '@infinite-canvas-tutorial/mermaid';

const nodes = await parseMermaidToSerializedNodes(
    'flowchart LR\n start-->stop',
);
api.runAtNextTick(() => {
    api.updateNodes(nodes);
});

flowchart

It can also be easily converted into a hand-drawn style:

A more complicated example:

Watercolor with watercolorizer:

sequence

state

ERD

Class

Mindmap

Lesson 23 - Mindmap

Released under the MIT License.