Loading...
Create, edit, import and export Mermaid diagrams directly in your browser. Write flowcharts, sequence diagrams, ER diagrams, architecture maps and more with a live preview, then export SVG, PNG or Markdown — no account, no uploads.
Loading the Mermaid editor…
Mermaid is an open-source, text-based diagramming language. Instead of dragging boxes around a canvas, you describe a diagram in a few readable lines of code and Mermaid lays it out automatically.
Because diagrams are plain text, they live next to your code: they diff cleanly in pull requests, stay easy to update, and render natively in GitHub, GitLab, Notion, Obsidian and many documentation sites.
flowchart LR
A[User] --> B[HiMat Website]
B --> C[Free Tool]
C --> D[Result]Start from the example, choose one of 23 diagram types or a real-world template (SaaS architecture, auth flow, CI/CD, payments), or import an existing .mmd or Markdown file.
Type Mermaid code in the editor and the preview re-renders automatically. Syntax errors show the exact line and column, with Jump to Error and one-click Fix Syntax.
Download SVG, PNG, JPG or WebP at up to 4x scale, save Markdown or a .himatdiagram project, copy SVG or images to the clipboard, or generate a share link.
Every type below has a ready-made starter template in the editor. Diagram types that are newer in Mermaid (marked beta upstream) are supported by the bundled Mermaid version.
Decisions, processes and branching logic.
Messages exchanged between actors over time.
Object models, fields, methods and relations.
Lifecycle states and transitions.
Database tables, keys and cardinality.
Steps a user takes and how they feel.
Project schedules and milestones.
Proportions of a whole.
Branches, commits and merges.
Hierarchical ideas radiating from a root.
Events in chronological order.
Plot items on two axes.
Requirements and what satisfies them.
System context in the C4 model.
Cloud services and how they connect.
Flow volumes between stages.
Bar and line charts.
Grid-based system blocks.
Work items grouped by status.
Directory-style hierarchies.
Overlapping sets.
Compare items across several axes.
Fishbone cause-and-effect analysis.
Professional code editor with Mermaid syntax highlighting, folding, search and replace, and instant debounced rendering with pan, zoom, fit and fullscreen.
Open Mermaid source files, extract ```mermaid blocks from Markdown (choose between multiple diagrams), paste code, or drag and drop files straight into the editor.
Download crisp SVG or raster images at 1x–4x scale with transparent, white or theme backgrounds and custom padding, or copy SVG and images to the clipboard.
Flowchart, sequence, class, state, ER, Gantt, C4, architecture, mindmap, timeline, Sankey, Kanban, Venn, radar and more, plus SaaS, auth, CI/CD and payment flow templates.
Diagrams autosave to your browser's IndexedDB with a Recent Diagrams library. Share links encode the diagram in the URL fragment — nothing is stored on a server.
Invalid syntax never breaks the page. See the error line and column, jump straight to it, and apply one-click fixes for common Mermaid mistakes.
Our Mermaid Diagram Editor is open source under HiMat Technology. Star the repository, inspect the import and export logic, or contribute new templates on GitHub.
Your diagrams stay in your browser. Mermaid code and imported files are processed locally whenever possible. No account is required. Autosave uses your browser's own storage, and share links keep the diagram in the URL fragment, which is never sent to our servers.
The only exception is the optional Generate with AI feature: when you choose to run an AI action, your prompt and diagram code are sent to an AI provider to produce the result. Everything else works without it.
Yes. The HiMat Mermaid Diagram Editor is completely free, with no usage limits on editing, rendering, importing or exporting diagrams.
No. There is no sign-up or login. Open the page and start writing Mermaid code — your diagrams are saved locally in your browser.
No. Rendering, importing, exporting, autosave and share links all run locally in your browser. The only exception is the optional “Generate with AI” feature: when you click an AI action, your prompt and diagram code are sent to an AI provider to produce a response.
Yes. You can import .mmd and .mermaid source files, Markdown (.md) files containing ```mermaid code blocks, and .himatdiagram project files — via the Import button, Ctrl/Cmd + O, paste, or drag and drop.
Yes. SVG export preserves the diagram layout, text, arrows, nodes, styles and theme, with options for a transparent background and embedded metadata (title and Mermaid source).
Yes. Export PNG at 1x, 2x, 3x or 4x scale with a transparent, white or theme background and custom padding. JPG and WebP exports are also available.
Yes. Export as Markdown (.md) to get your diagram wrapped in a ```mermaid code block with a heading, ready to paste into README files, docs sites and wikis that support Mermaid.
Yes. GitHub renders ```mermaid code blocks natively in README files, issues, pull requests and wikis. Design and validate your diagram here, then export Markdown or copy the Mermaid code into GitHub.
Everything supported by the bundled Mermaid version, including flowcharts, sequence, class, state, ER, user journey, Gantt, pie, Git graph, mindmap, timeline, quadrant, requirement, C4, architecture, Sankey, XY chart, block, Kanban, TreeView, Venn, radar and Ishikawa diagrams.
HiMat Technology designs and builds scalable Next.js applications, backend APIs, AI features and cloud architectures — with clean documentation and full source code ownership.
Continue with related utilities, services, and guides from HiMat.