Skip to content

Mermaid in the Web App

Keep diagrams precise without keeping people out of the workflow.

Mermaid is the current source format for Merfolk diagrams. The web editor renders that source into a visual diagram while you work, giving technical contributors precision and giving the wider team something they can review together.

Start with a diagram type

For example, a flowchart:

flowchart LR
  User --> App --> Database

You can use Mermaid’s supported diagram syntax, including flowcharts and sequence diagrams. If the preview reports a syntax problem, inspect the source near the highlighted error.

Keep source readable

  • Give nodes descriptive labels.
  • Use consistent direction and naming.
  • Keep large diagrams organized into logical sections.
  • Store important source in version control when the diagram is part of a software project.

The CLI get command can retrieve a diagram’s source for local editing or automation.

Navigation

Type to search…

↑↓ navigate↵ selectEsc close