Hashlite

Mermaid diagram editor

Loading the editor…

Diagrams with Mermaid

flowchart LR
  A[Write Markdown] --> B{Looks good?}
  B -- Yes --> C[Export PDF]
  B -- No --> A

sequenceDiagram
  participant You
  participant Hashlite
  You->>Hashlite: Paste Markdown
  Hashlite-->>You: Live preview

Mermaid diagram editor, free and in your browser

Write Mermaid code in a ```mermaid block and see the diagram as you type, next to the rest of your document. Flowcharts, sequence diagrams, class and state diagrams, Gantt charts and more.

How it works

  1. Write a mermaid block

    Start a code block with ```mermaid and describe the diagram.

  2. Watch the preview

    The diagram redraws as you type. Syntax errors are shown instead of the diagram.

  3. Export it

    Save as PDF, or download HTML with the diagram inlined as SVG.

Read the full guide →

Questions

Which diagram types work?

All Mermaid types, including flowchart, sequence, class, state, entity-relationship, Gantt, pie and mindmap.

Can I mix diagrams with text?

Yes. Diagrams sit in a normal Markdown document, with headings, lists and tables around them.

Does it work in dark mode?

Yes. Diagrams follow the colour theme, and printing always uses a light version.