Write Mermaid syntax and watch the diagram render live, with ready-made examples and SVG or PNG export.
The Mermaid Diagram Editor turns plain text into visual diagrams in real time, using the mermaid.js library directly in your browser. You write syntax in the editor on the left (for example flowchart TD for a flowchart or sequenceDiagram for a sequence diagram) and the preview on the right updates automatically, with a short delay so typing never feels blocked. The tool covers flowcharts, sequence diagrams, Gantt charts, pie charts, mind maps and class diagrams, with a ready example for each type. If there is a syntax error, the original mermaid.js message appears below the editor and the last valid diagram stays visible, so a typo never wipes out what was already working. The result can be exported as an SVG file (vector, ideal for documentation and print) or a PNG file (rasterized at double resolution, ready to paste into a presentation). All processing happens locally: no code or diagram is ever sent to a server.
mermaid.js reads the first keyword in the code to decide the diagram type: flowchart starts a flowchart, sequenceDiagram a sequence diagram, gantt a schedule, pie a pie chart, mindmap a mind map and classDiagram an object-oriented class diagram. From there, each line describes nodes, participants, tasks, slices or classes and how they connect, using syntax specific to each type (arrows like --> in flowcharts, ->> and -->> in sequences, or colons and dates in Gantt charts).
The editor re-renders the diagram after every short pause in typing, with no refresh button to click. If the syntax has an error, such as a malformed arrow or a wrong keyword, mermaid.js refuses to parse it and returns a message pointing at the problem line, shown directly below the editor.
In the flowchart example, the line B -->|Yes| C draws a labeled 'Yes' arrow from decision B to step C, and the same node B can carry another arrow labeled 'No' pointing to a different path, forming conditional branches with no extra configuration. In the sequence example, Cliente->>API: Solicita dados draws a solid arrow from the Cliente participant to API carrying the message text, while API-->>Cliente: Responde JSON uses a dashed arrow to represent the reply.
In the Gantt chart, the line Design :a2, after a1, 5d creates a task named 'Design' that automatically starts when the task with id a1 finishes and lasts 5 days, which avoids recalculating dates by hand whenever the schedule is reordered. In the pie chart, each "Label" : value line becomes a slice proportional to that value, with the label and percentage computed automatically.
Mermaid diagrams are useful in technical documentation, architecture descriptions, process flows, project schedules and presentations, because the diagram lives alongside the text (versionable in Git, reviewable in a pull request) instead of being a loose image file. GitHub, GitLab and Notion, among other platforms, already render Mermaid code blocks natively in Markdown, so the same syntax written here usually works directly on those platforms with no adaptation.
About the limits: very large diagrams (dozens of nodes or a timeline with many tasks) become harder to read and may need horizontal scrolling both here and in other renderers; and because mermaid.js follows its own implementation of the language, small behavior differences between library versions are expected, so it is worth checking the result on the final platform before publishing anything critical.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/mermaid-diagram-editor"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Mermaid Diagram Editor"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
Mermaid is an open-source JavaScript library that turns plain text, written in its own Markdown-like syntax, into diagrams rendered as SVG. Instead of manually drawing boxes and arrows in a graphics tool, you describe the diagram's structure in a few lines of text and the library computes the layout and draws the result.
Loading the rendering engine...
Your Mermaid code and the rendered diagram stay in your browser, processed by the mermaid.js library. Nothing is sent to any server.