Formats
format attribute. The format is Mermaid text, draw.io XML, BPMN XML, or a format that a Diagram Renderer of your own lists. What pasted text becomes is on Pasting.The formats
format | Source | Drawn by |
|---|---|---|
'mermaid' | Mermaid text | mermaid.js or Pele, see Mermaid diagrams |
'drawio' | draw.io XML | The draw.io Diagram Renderer, see draw.io diagrams |
'bpmn' | BPMN 2.0 XML with its layout | The BPMN Diagram Renderer, see BPMN diagrams |
| Another id | Stored as it is | A Diagram Renderer that lists it, see Other formats |
Mermaid diagrams
A diagram with format: 'mermaid' holds Mermaid text, stored as you typed it, but without
%%{…}%% directives and frontmatter. See Source is data.
editor.commands.insertFlowDiagram({ source: 'flowchart LR\n A --> B', title: 'Order process' })The source starts with a Mermaid kind, such as flowchart or sequenceDiagram.
Mermaid kinds lists every kind a diagram can hold.
Register one of two Diagram Renderers for it,
mermaidDiagramRenderer or
peleDiagramRenderer.
Next to mermaid.js compares the two.
draw.io diagrams
A diagram with format: 'drawio' holds draw.io XML. The
draw.io Diagram Renderer draws it and also connects the draw.io
editor, so you can change it. Its page has a demo and
the rules for the source.
editor.commands.insertFlowDiagram({ source: drawioXml, format: 'drawio', title: 'Order process' })BPMN diagrams
A diagram with format: 'bpmn' holds BPMN 2.0 XML with its layout, stored as written. The
BPMN Diagram Renderer draws it and also connects the bpmn-js
modeler, so you can change it. Its page has a demo and the rules for the source.
editor.commands.insertFlowDiagram({ source: bpmnXml, format: 'bpmn', title: 'Payment check' })Other formats
A Diagram Renderer of your own can draw a format of its own. The id rules, the size limit and what happens when no Renderer draws it are on A format of your own.