A Mermaid and Markdown editor that keeps your work to yourself

What you can do

• Write and preview. The diagram redraws as you type. Line numbers and a marked error line show where a syntax error is.
• Two modes. Switch between Mermaid, for one diagram, and Markdown, for a document with headings, lists, tables and as many ```mermaid blocks as you like. Each mode keeps its own text, so switching never changes what you wrote, and the menu offers what suits each mode.
• Share by link. The diagram or document is compressed into the link itself, so anyone with the link sees it. A view link shows only the drawing, in the theme you chose, with a button to open it in the editor.
• Share by QR code. Scan the code with a phone to open the diagram there, or download it as a PNG for slides and print.
• Put it in a document. Copy the diagram as an image, or download SVG or PNG, in light or dark colors with a clear or solid background. Exports use Arial, so text fits in any document app.
• Save a document. Export a Markdown document as a PDF through your browser's print dialog, with selectable text and sharp diagrams, or download it as a .md file. Open a .md file from your device to keep working on it; it's read in your browser and sent nowhere.
• Start quickly. Begin from an example of any of the 32 diagram types Siren draws or a sample document, or reopen something you worked on recently.
• Read it your way. Three themes: Sail (light), Deep (dark) and Lighthouse (high contrast), or Auto to follow your system.

Every Mermaid diagram type

Siren draws diagrams with Pele, which supports every diagram type built into Mermaid 12.1.0, including:

• Flowchart
• Sequence
• Class
• State
• Entity relationship
• Gantt
• Pie
• Mindmap
• Timeline
• Git graph
• User journey
• Quadrant chart
• XY chart
• Sankey
• Architecture
• Block
• Packet
• Requirement
• C4
• Kanban

Private by design

• Your diagram or document lives in the part of the link after #, which browsers never send to a server. Siren has no accounts, no analytics and no tracking.
• Images inside a shared diagram or document aren't loaded, so a link can't reveal who opened it.
• HTML inside a Markdown document is shown as text, never run.
• Links show where they really go and ask before opening.
• Recent work is kept only in your browser, and you can clear it at any time.

Works offline

Once Siren has loaded, it needs no network. Every diagram type, Markdown, the QR code and exports are part of the page, so you can keep working on a plane or a patchy connection.

Tips

• Click Siren in the editor's header for a blank diagram or document. Your browser's Back button returns to the one before, and also undoes a switch between modes.
• In Mermaid mode, paste a fenced ```mermaid block from GitHub or a chat, and Siren keeps just the diagram. In Markdown mode the fences stay, so it's drawn in place.
• Links carry everything, so a long document makes a long link: about six characters of link for every ten of prose. If an app cuts it short, send the .md file instead.
• On a wide screen, drag the divider between the editor and the diagram, or focus it and use the arrow keys. Double-click resets it.
• Add ?theme=light, dark or contrast to a link to choose how it looks.

Credits

Made by plwg. Rendering by Pele, Marked and highlight.js. Set in Instrument Sans and JetBrains Mono. Siren is open source under the MIT license; the source is on GitHub.