Mermaid Markdown Editor with Live Preview

Write diagrams as text, right inside your Markdown document. RenderMD shows the result beside your source.

What is Mermaid?

Mermaid turns text into diagrams. You describe the steps and connections instead of drawing each box and arrow. It is useful for architecture notes, workflows, and technical documentation.

Try a simple flowchart

Copy this entire block into the RenderMD editor, including the three backticks at the start and end. Choose Split to see the diagram beside the source.

```mermaid
graph TD
  A[Write Markdown] --> B[Preview diagram]
  B --> C[Share document]
```

This creates three connected boxes: Write Markdown, Preview diagram, and Share document. Change the text inside the square brackets to change each label.

Seeing code instead of a diagram?

The opening fence must say mermaid, not lua or another language. Keep graph TD inside the block and close it with three backticks. Text outside the fence is treated as normal Markdown.

Keep the diagram with your notes

Add headings, explanations, and code blocks around your diagram. When you are ready, share a read-only workspace link or export the document to PDF. For PDF export, wait for the diagram to finish rendering, then choose Save as PDF in the print dialog.