Mermaid Live Editor: Write Mermaid Code and See It Render Online
This page is the free Mermaid live editor. You write Mermaid text in the browser and the diagram renders beside the code. It is a mermaid online editor for anyone who wants a mermaid diagram online without installing a desktop app. Open it, paste a definition, and keep editing until the picture matches the idea.
What is the Mermaid live editor?
The Mermaid live editor is a browser tool for turning a text definition into a diagram while you work. Mermaid is a text format. A flowchart is a few lines that name boxes and the arrows between them. A sequence diagram is a list of messages between participants. A class diagram lists types, fields, and relationships. This page keeps that text and the rendered picture on one screen. You do not install a compiler, a browser extension, or a desktop drawing program to try an idea. The page loads a code pane with Mermaid syntax highlighting and a preview that runs in the browser. When the text parses, the preview updates. When it does not parse, the editor reports the syntax problem so you can correct the line instead of guessing which shape moved.
People use an online mermaid session to draft a figure during a design review, to tidy a diagram before it goes into a README, or to try a sample before the source is committed to git. The diagram source stays readable. You can copy it into Markdown, a pull request description, or another tool that understands Mermaid. The picture is a rendering of that source. It is not a separate drawing you have to rebuild by hand after every label change. That is the practical difference between this mermaid editor online and a general slide tool: the text is the document, and the preview is there to check it.
The home page introduces the product and shows examples. This URL is the working surface. On a wide screen the code pane and the preview sit next to each other, and you can resize the split. On a narrow screen the editor switches between code and preview so the diagram still has room. A guest can start immediately. The diagram you are editing is kept in this browser's local storage, so a refresh does not throw away the text you just wrote. Saving a named diagram to an account is a separate step. Sign in and choose Save Diagram when you want that copy stored with your account and opened later from another browser. Sharing a link is also available to the signed-in owner of a diagram. Writing and previewing do not require a paid plan.
Paid plans change what you can download and which account tools are unlocked. A standard PNG is available from the export panel, with a watermark for guests and free accounts. A higher-resolution PNG is on the Starter plan. SVG and PDF are on the Pro plan. Version history of saved diagrams is a Starter feature. Comments on a diagram are a Pro feature. Those limits are spelled out below so the free editing path stays clear. Signed-in users can also open an assistant in the editor and ask it to draft Mermaid from a short description. The assistant spends the AI allowance on the current plan, and you can edit every line after it is inserted. The preview still has to accept the text. The assistant is optional. The live editor works if you never open it. The interface can be switched among English, Chinese, Japanese, and Korean. The diagram source stays in Mermaid syntax in every language.
How to use the online Mermaid editor
Use this mermaid editor online in four steps. You can stop when the preview looks right, or continue on to export and save. The first three steps do not ask you to create an account. The goal is a mermaid diagram online that you can read as text and check as a picture.
Open the editor and look at both panes
You are already on the editor. On a wide screen the code pane and the preview are visible together. On a phone or a narrow window, switch between the code and the picture so each one can use the width. The first visit is a working area, not a second marketing page. If a previous local diagram is still in this browser, that text is what the preview is drawing. Select it and replace it when you want a new figure. Nothing in this step installs software, and you do not need a sign-in to start typing.
Paste or write Mermaid
Type a diagram or paste one from a README, a ticket, or a template. A flowchart usually starts with the word flowchart or graph, then a direction such as TD or LR, then one line per arrow. A sequence diagram starts with sequenceDiagram and lists participants and messages. A class diagram starts with classDiagram. An entity relationship diagram starts with erDiagram. The code pane highlights those keywords, which makes arrows and labels easier to scan than a plain text box. Keep the labels short enough to read in the picture, and put longer explanation in the document around the diagram. The editor stores this text as the source. The picture is only a rendering of it.
Read the preview and fix syntax
The preview renders when the text is valid Mermaid. Change a label, add an arrow, or rename a participant, then look at the picture again. If a line is invalid, the editor reports the syntax problem instead of pretending the last good picture is still the current source. Fix the reported line and check the preview. This loop is why an online mermaid session is faster than exporting from a drawing tool and uploading a new PNG every time a label changes. When you need the exact keyword for a diagram type, use the documentation links in the next section, then paste the example back here.
Export a PNG or save to your account
When the picture is the one you want, open Export. A PNG download is available in the editor. Guests and free accounts get a watermark on the standard PNG. A higher-resolution PNG is on the Starter plan. SVG and PDF are on the Pro plan. If you only needed a quick look, copy the Mermaid text and leave. To keep a named copy on your account, sign in and use Save Diagram. That account copy is what you reopen later. Local storage follows this browser. Save Diagram follows the signed-in user. Clearing site data, switching browsers, or using a private window drops the local copy.
Diagram types you can edit here
The live editor renders the Mermaid diagram types below. Each name links to the matching page on the documentation site, where the syntax is shown with examples. The list follows the diagram kinds this editor detects from the first line of source and then draws in the preview. Pick the type that fits the information, open the doc if you need a keyword, and paste the sample into the code pane on this page.
Flowchart
Flowcharts describe a process from one step to the next. Start with flowchart or graph, choose a direction, and connect nodes with arrows. Rectangles, rounded boxes, and diamond decisions are all written as text, so a review comment can point at a line instead of a pixel. Use a flowchart for an approval path, a troubleshooting tree, or the steps in a runbook. The flowchart docs show node shapes and link styles you can paste into this editor and check in the preview.
Sequence diagram
Sequence diagrams show messages in time order. Declare the participants, then write each message from sender to receiver. They fit an API call, a login handshake, or a job that hops between services. Notes, loops, and alternative blocks stay in the same text file as the happy path, which makes the diagram reviewable in a pull request. The sequence docs explain those blocks. Copy a sample into the live editor when you want to see the order of messages rather than imagine it.
Class diagram
Class diagrams list types, their fields and methods, and relationships such as inheritance, association, or dependency. They are a compact way to agree on a domain model before the same names spread across code. Visibility markers stay in the source, next to the class they describe. Use one when a design discussion keeps confusing two nouns that should be different types. The class diagram docs cover the relationship arrows. Paste them here to confirm the picture matches the model you meant.
State diagram
State diagrams describe modes and the events that move between them, including a start and an end. They suit a device, a ticket, a payment, or a multi-step form that should not accept every click in every mode. Nested states are available when one mode contains other modes. Write the transitions as text so a missing edge is a missing line, not a missing box someone forgot to drag. The state docs show the keywords, including choice points and notes.
Entity relationship diagram
Entity relationship diagrams sketch tables and how rows point at each other. Write entities, attributes, and cardinality in text. Use one when a schema change needs a picture that can still live beside the migration in version control. Cardinality markers show one-to-one, one-to-many, and many-to-many relationships without a separate modeling suite. The ER docs show those markers. Bring a real table pair into this editor if you want the preview to expose an ambiguous relationship before the migration is written.
User journey
User journey diagrams map the stages of an experience and a score for the tasks inside each stage. They are lighter than a flowchart and easier to read in a product review where the question is how a task feels, not which system call runs. Sections group the tasks, and the scores make a weak step visible. The user journey docs explain the section and task lines. Paste a journey here when a prose funnel is harder to scan than a simple diagram.
Gantt chart
Gantt charts place tasks on dates, with sections, durations, and dependencies. Use them for a short project plan that you are willing to edit as text when a date slips. Milestones are tasks with no duration. Task states such as done or active can be marked in the source. The Gantt docs show the date format the renderer expects, which is the usual reason a chart fails to parse. Keep the plan small enough that the text is still something a person will update.
Pie chart
Pie charts show parts of a whole. A title and a list of labels with numbers is enough for a first version. Add the showData option when the raw values matter more than the percentages alone. Too many slices become hard to read, so group the long tail before you publish the figure. The pie chart docs include a worked example. Use this editor to check that the labels still fit the circle after you change the numbers.
Requirement diagram
Requirement diagrams connect requirements to elements, tests, or other requirements. They help a specification stay traceable without moving the source into a separate modeling product. Each relationship is a line you can review. Use one when a feature discussion needs to show which requirement a component is supposed to satisfy. The requirement docs list the relationship types. Paste a small set here first; a huge matrix is harder to read as a diagram than as a table.
Git graph
Git graphs draw commits, branches, and merges from a short script. They are useful in a talk or a README when a real repository graph is too noisy to explain one idea. You choose the commits that matter and ignore the rest. The picture is still text, so you can adjust a branch name without redrawing the history by hand. The git diagram docs show commit, branch, and merge keywords. Preview the script here before you drop it into a document.
C4 diagram
C4 diagrams describe software at the context, container, and component levels, plus related views such as dynamic and deployment. Use them when a system sketch should follow that vocabulary instead of a free mix of boxes. The header of the source selects the level, and the rest of the text names people, systems, and relationships. The C4 docs show those headers. They are a better fit than a flowchart when the question is what sits next to the system, not the order of steps inside one function.
Mind map
Mind maps indent ideas under a root. They are a fast outline that still renders as a diagram, which is useful in a brainstorming note that should stay in the repo. Keep labels short so the branches remain readable. Different bracket styles change the node shape, but the hierarchy comes from indentation. The mind map docs show that structure. Use the live preview to see whether a branch is too deep before you share the note.
Timeline
Timelines list events in order. Use one for a release history, a research chronology, or an incident narrative where the sequence matters more than the dependencies. Sections can group a period, and each event stays on its own line. The timeline docs show the time periods and section keywords. A timeline is easier to maintain than a row of dated boxes in a slide, because adding an event means adding a line and checking the preview.
Export and save your diagrams
Export and save do different jobs. Export downloads a file of the current picture. Save Diagram stores the Mermaid source on your account after you sign in. You can copy the source from the code pane at any time, with or without an account. That text is the portable version of the diagram. A downloaded image is a snapshot of one render.
PNG is the format available from the export panel for everyday sharing. A guest can export a standard PNG, and that file includes a watermark. A free signed-in account still has a watermark on the standard PNG. The higher-resolution PNG is available on the Starter plan and above, without that watermark. SVG and PDF downloads are on the Pro plan. The editor does not pretend those formats are part of the free editor. If a format is locked, the export panel says so and points at the plan that includes it.
Local storage is the safety net before you have an account. It keeps the diagram you are editing in this browser, including across a refresh. It is not a backup. Clear the site data, switch browsers, or open a private window and the local copy is gone. Save Diagram is the durable copy, and it requires sign-in. After you sign in, a guest diagram in this browser can be migrated onto the account. Reopening that diagram later loads the saved source back into the same code-and-preview editor.
Two account tools sit next to save, and both are plan features rather than part of the free preview. Version history of a saved diagram is available on the Starter plan and above. Comments on a diagram are available on the Pro plan. You can write, preview, and copy Mermaid without either feature. Use them when a diagram is shared with other people and you need earlier copies or a note attached to the file.
Start from a template
A blank file is slower when you already know the kind of picture you need. The template library holds finished Mermaid sources for common diagrams. Open a template, then continue in this editor and replace the sample labels with your own. The template is a shortcut into the same code-and-preview loop, not a different drawing tool and not a locked image.
Templates are useful when you remember the shape and not the first line of syntax. A sequence template already has participants. A flowchart template already has a direction and a few nodes. Change the words, delete the steps you do not need, and let the preview tell you whether the remaining text still parses. When the figure is yours, copy the source or sign in and save it.
The product introduction, with examples of what Mermaid Viewer is for, lives on the home page. Come back to this live editor when you are ready to change the text and watch the diagram render. If you want the keyword reference instead of a full sample, use the documentation links above. Each one opens the syntax page for that diagram type.
Frequently asked questions
Can I use the mermaid editor online without signing up?
Yes. Writing Mermaid and watching the preview on this page does not require an account. The diagram you are editing stays in local storage in this browser. An account is what you need for Save Diagram, for a share link as the diagram owner, and for plan features such as a higher-resolution PNG, SVG, PDF, version history, and comments. The free mermaid live editor is the writing and preview path.
Does the preview update while I edit?
Yes. The preview renders the current text when it is valid Mermaid. You do not press a separate compile button to see the on-page picture. If the syntax is invalid, the editor reports the problem so you can fix that line. The picture is a render of the text in the code pane, so the source you copy is the same source the preview used.
Which export files can I download for free?
A standard PNG can be downloaded without a paid plan. Guests and free accounts get a watermark on that PNG. A higher-resolution PNG is on the Starter plan. SVG and PDF are on the Pro plan. Copying the Mermaid source from the code pane does not require a paid plan, and that source is what you can paste into Markdown or another Mermaid tool.
What is the difference between this page and the home page?
The home page introduces Mermaid Viewer and its examples. This page is the live editor: the place to write a mermaid diagram online, fix syntax, and export a picture of the result. Use the home page to see what the product is, and use this page when you are ready to edit. The two pages answer different searches on purpose.
Where do I look up Mermaid syntax?
Each diagram type on this page links to the matching page on the documentation site. Those pages show keywords and examples for flowcharts, sequence diagrams, class diagrams, ER diagrams, and the other types listed above. Paste an example back into this editor to see it render. The documentation home is linked at the top of this guide.