Diagram Studio

Diagram Studio draws diagrams from text written in Mermaid, the diagram language that GitHub, GitLab, Notion and many documentation sites render themselves. Write “A --> B” and an arrow appears; write a sequence of calls, a set of tables, a project plan or a mind map and each is laid out for you. It draws flowcharts, sequence, class, state, entity-relationship, architecture, C4, Git, requirement, Gantt, timeline, Kanban, user-journey, mind-map, quadrant, block, pie, XY, Sankey and packet diagrams, using Mermaid 12 itself, so what you see here is what those sites will show. Paste CREATE TABLE statements and it makes an entity-relationship diagram from your tables, keys and foreign keys; paste an OpenAPI description, a JSON Schema or an API response and it makes a class diagram of its types. Export an SVG for documents, a PNG for slides and chats, a PDF through your browser’s print, or the code as Markdown ready to paste.

1. Press New and pick a type to start from its example, or open a template — sign-in, payments, microservices, a CI/CD pipeline, an e-commerce schema and more.
2. Edit the code on the left; the diagram redraws as you pause. Ctrl/⌘+Enter draws at once, and a large diagram (over 400 lines) draws only when you ask, so typing stays quick.
3. If a line is wrong, it is underlined and the bar below the code says what is expected, on which line — with a one-click fix for common slips such as a sequence arrow in a flowchart. The last good drawing stays on screen meanwhile.
4. Move around the diagram with the wheel or a pinch to zoom, drag to pan, or the arrow keys; Find a box jumps to any label, and the outline (under the health button for a flowchart, the Outline button for class, ER, state and sequence diagrams) lists every box to jump to. Show code, both or the diagram alone, and go full screen with Alt+F.
5. For a database, press SQL → ER, paste your schema (PostgreSQL, MySQL, SQL Server, SQLite or Oracle) and make the diagram. For an API, press API → Classes and paste its OpenAPI file, a JSON Schema or a JSON response.
6. Export as SVG, PNG at 1–3×, print or PDF, Markdown or a .mmd file — or save it under a name in Saved, on this device.

• Mermaid lays diagrams out in the page itself, so a very large one takes time: about 1.5 seconds for 250 boxes and 8 seconds for 1,000 on a typical laptop. Above 400 lines the studio draws only when you ask.
• Each diagram type’s drawing code downloads the first time that type is drawn, then is kept: after that it works offline. The ELK layout (fewer crossings on big diagrams) is a further 0.5 MB, loaded only if you choose it.
• Diagrams cannot run code or open links: Mermaid’s strict mode is on, click handlers are off, and a diagram’s own settings cannot change that.
• SQL → ER reads table definitions only (CREATE TABLE, ALTER TABLE … ADD, CREATE INDEX). Views, functions and data are skipped and counted, and relationships are drawn only from declared foreign keys — never guessed from column names.
• API → Classes draws only the links a document declares — $ref, allOf, oneOf and anyOf — never one guessed from a field called customerId. References to other files are listed, not followed, and past 250 types the rest are listed rather than drawn. A JSON sample shows the shapes in that sample only: a field it never contains cannot appear.
• The user-journey diagram draws its text as HTML, which browsers will not put on a canvas, so its PNG uses plain text in the same boxes; its SVG keeps the original.
• Everything happens in your browser. Your diagram code, your SQL and your API descriptions are read and drawn on this device and never sent anywhere; the page loads Mermaid from this site, not from anyone else. Your work is saved as you type in this browser’s storage, so a closed tab or a crash does not lose it, and diagrams you save by name stay there too — they are part of “Export my data” and go with “Delete everything”. Nothing is put in the page address.

The code is standard Mermaid and this studio draws it with Mermaid 12, so the shapes, links and layout match. Colours can differ: GitHub and Notion apply their own theme, and the ToolsDev theme here follows this page. Use Copy as Markdown to paste it as a ```mermaid block.

Export the schema only — pg_dump --schema-only, mysqldump --no-data, or “Script as CREATE” in SQL Server — and paste it into SQL → ER. Primary keys, unique columns and foreign keys are marked, and each relationship shows whether it is one-to-one or one-to-many and optional or required, from the keys and NOT NULL alone. Hide the columns for a quick map of a big schema.

Press API → Classes and paste the OpenAPI file (3.x or Swagger 2.0, JSON or YAML) or open it. Each named schema becomes a box with its fields, marked “?” when not required; a $ref is a link with how many (1, 0..1 or *), allOf is inheritance, oneOf a box its options realise, and an enum lists its values. No OpenAPI file? Paste a response from the API and the types are inferred from it, the way JSON → TypeScript does.

Each Mermaid type has its own syntax: “-->>” is an arrow in a sequence diagram but an error in a flowchart, and an ER relationship needs “: label” after it. The message names the line and what was expected; the Syntax link opens Mermaid’s own page for that type.

In this browser, on this device. The current diagram is saved as you type and comes back when you return; Saved keeps up to 50 named diagrams. Clearing site data removes them, so export anything you need to keep elsewhere.

Style switches between the ToolsDev theme, Mermaid’s default, neutral, dark and forest, a clean or hand-drawn look, and two layouts. To fix a theme for everyone who renders your code, put it in the code itself with a %%{init: {"theme": "neutral"}}%% line or front matter; classDef and style lines colour single boxes.