@inkeep/mermaid-wysiwyg-dom
v0.1.0
Published
Interactive WYSIWYG canvas for Mermaid: renders through mermaid itself and overlays selection, drag-to-connect, inline label editing, and code sync.
Readme
@inkeep/mermaid-wysiwyg-dom
Interactive WYSIWYG canvas for Mermaid: renders through your
mermaid instance for full fidelity, then overlays selection, drag-to-connect,
in-place text editing, entity popovers (shapes, arrow types, colors, cardinalities),
and keyboard editing, every gesture compiled to a minimal source edit by
@inkeep/mermaid-wysiwyg-core.
import mermaid from 'mermaid'
import { MermaidWysiwygEditor } from '@inkeep/mermaid-wysiwyg-core'
import { MermaidCanvasView } from '@inkeep/mermaid-wysiwyg-dom'
const editor = new MermaidWysiwygEditor({ code: 'flowchart TD\n A --> B' })
new MermaidCanvasView({ editor, container: el, mermaid })