Free Mermaid diagram preview. Live canvas, appearance controls, and bring-your-own-key Assist. No account.
Inside the studio
Boxes and arrows for any process, branching, or decision flow.
31 diagram types
Devchart runs on Mermaid 11 (opens in a new tab). Try any type in the studio, or open from Commands ⌘K. In Assist, lock a type with the shapes control or /pie-style shortcuts so proposals stay on that Mermaid family.
Steps, decisions, and branches in a process. Use for workflows, algorithms, and yes/no paths.
Messages between participants over time. Best for APIs, handshakes, and request/response flows.
Classes, fields, methods, and relationships. Use for object models and UML structure.
Database entities and how they relate. Good for schemas, tables, and cardinality.
States and the transitions between them. Use for lifecycles, status machines, and UI modes.
A central idea with branching topics. Handy for brainstorming and outlining concepts.
Nested hierarchy like folders or menus. Use when structure and nesting matter most.
Tasks on a calendar timeline. Use for project plans, milestones, and schedules.
Events in chronological order. Good for history, roadmaps, and release stories.
Parts of a whole as slices. Use for simple share or proportion comparisons.
Software architecture at context or container level. Clear view of systems and users.
Work items in columns by status. Use for boards like To do / Doing / Done.
Appearance
Palette, spacing, corners, and arrows update the live Mermaid render instantly. Same controls as the studio Appearance panel.
Some controls apply only to certain diagram types.
Canvas theme
Follow the app automatically, or give only the diagram canvas its own theme.
Background
Remember this look
Save the current style on this browser.
Assist
Scroll the scripted run (model, prompt, diff, apply). Same rhythm as the studio dock. Bring your own key. Keys never leave your browser.
Assist · Demo · BYOK in studio
More features
Diagram starters, export, workspace, Assist provider and model, problems, and the command palette: the same surfaces you use in the studio, shown here as a quick tour.
Diagram starters
Flowchart, sequence, ER, C4, sankey, Wardley, Cynefin - 31 starters from ⌘K. Pick a type and start editing.
New diagram
From Commands · ⌘K
Export
Same export sheet as the studio: format, quality, padding, transparent backgrounds, and an optional credit line.
Preparing preview…
Workspace
Upload up to five .mmd or .mermaid files, or save every tab as JSON or zip and reopen the complete workspace later.
Assist provider
Connect OpenAI, Mistral, Gemini, and more. Assist uses that provider's API with a key stored only in your browser.
Assist model
After you pick a provider, select the exact model Assist should use for diagram edits and explanations.
Assist diagram type
Pick a type from the composer shapes control, or type /pie, /sequence, and friends. Assist gets stricter Mermaid rules for that kind - the /type stays visible in your chat, but is stripped before the model sees the prompt.
/pie mobile vs desktop share
Problems
Errors, warnings, and Assist validation land in the same Problems panel. Jump to the file and line.
Problems
1 error · 1 warningCommand palette
Commands are grouped by job - New diagram, Navigate, Assist, Export, Appearance, Layout. Type a few letters and run it.
Start a diagram, jump to files, Assist, export, theme, and layout.
Ready when you are
Write Mermaid, tune appearance, export, and use Assist with your own key. Free, no account.
FAQ
No. Devchart runs in your browser. Diagrams stay on your device: nothing to sign up for, and nothing is uploaded for a Devchart account.
It stays in your browser and is sent only to the provider you choose when you chat. Devchart's servers do not store your key.
Yes. Free with no Devchart-imposed limits. Assist usage is billed by your own provider.
OpenAI, Anthropic, Google, Mistral, DeepSeek, Groq, xAI, and more, including OpenRouter. Bring your own key for each and switch anytime from Assist settings.
In the Assist composer, open the shapes control and pick a type, or type / and choose from suggestions (for example /pie). That locks Assist to that Mermaid family with stricter syntax rules.
No. Assist proposes Mermaid source replacements you can review as a diff. You apply (or dismiss) each proposal - nothing lands on the canvas until you confirm.
When Match theme is on, Assist styles proposals for your current light or dark canvas. When it is off, the model may choose colors more freely while still keeping labels readable.
All major Mermaid 11 families - flowchart, sequence, class, state, ER, gantt, C4, architecture, sankey, and dozens more. See the full list in Mermaid charts we support. Each card shows the Assist /type shortcut for that chart.
Yes. Export PNG and SVG with control over scale, padding, and background, plus .mmd source and .zip workspace bundles.
Yes. The studio is a multi-tab workspace. Save everything as JSON or a .zip from Workspace, then reopen the project later on the same device.
Use the studio when something looks wrong in a diagram, and check the Problems panel for parse issues. For product feedback or bug reports, contact contact@technway.biz.