Online Diagram Maker

About Diagram Studio

A canvas for the diagrams software people actually draw: architecture, sequence, component, data flow, state, activity, deployment, entity relationship, C4, event-driven, network topology and mind maps. Pick the kind and the palette on the left becomes that notation's shapes — lifelines and activations for a sequence, tables with keys for an ER diagram, people, systems, containers and boundaries for C4, routers, switches, firewalls and subnets for a network — with the general boxes, notes and groups underneath.

Drag a shape onto the canvas, or click it to drop it in the middle. Hover any shape and a dot appears on each side; drag from one to another shape to connect them, or into empty space to make a linked copy there, which is the quickest way to draw a chain. Double-click anything to type its text, drag the corners to resize, and drop a shape inside a group, boundary, lane or subnet to put it in — it then moves with it.

Connectors know their notation. A sequence message runs straight across between lifelines and can be dragged up and down; an ER line carries crow's feet for one, zero-or-one and many; a component dependency is dashed with an open arrow. Each can be switched between elbow, straight and curved, dashed or dotted, with any of thirteen ends, and elbows route themselves round the shapes in their way.

Auto layout arranges the whole diagram from its connectors — in layers top to bottom or left to right, messages in order down the lifelines, or branches either side of the centre of a mind map — which turns a pile of shapes into something readable in one click. Line up, spread evenly and stack order are there for finishing by hand.

Already have it in Mermaid? Paste a flowchart, sequence, state, ER, mind map, C4 or architecture diagram — or a Markdown page with a mermaid block in it — and it becomes shapes and connectors laid out on the canvas, ready to rearrange, restyle and export. Groups, subgraphs, notes, loop and alt frames, activations, crow's feet and styles come across; anything it cannot read is listed rather than failing the import.

PlantUML comes in the same way. Paste a sequence, state, activity, class, use case, component or deployment diagram, an IE entity diagram, a mind map or WBS, an nwdiag network, or C4-PlantUML — which kind it is is worked out from what is written, as PlantUML itself does — and it arrives as the matching kind here. Aliases, groups and packages, notes, alt and loop frames, activations and returns, if, while, repeat, fork and swimlanes, class members and relation ends all come across; skin parameters, themes and preprocessor logic are skipped, since the editor does its own layout.

It goes the other way too. Export as Mermaid writes the diagram as text to paste into a README, a pull request or a wiki, where GitHub, GitLab, Notion and most documentation sites draw it: sequence, state, ER, mind map and C4 diagrams as their own Mermaid types, everything else as a flowchart with its groups, shapes and colours. Copy it as it is or already inside a mermaid block, or download a .mmd file.

Every kind opens with a worked example to start from, or a blank canvas. The diagram is kept in this browser as you go and offered back next time; Save writes it as a file that opens here again with everything editable, and Export writes a PNG, an SVG or a PDF the size of the diagram. Nothing is uploaded.

Where it helps

• Twelve kinds of diagram, each with its own palette of shapes and its own connector style.
• Imports Mermaid flowcharts, sequence, state, ER, mind map, C4 and architecture diagrams as editable shapes — pasted, opened as a .mmd file, or lifted out of a Markdown page.
• Imports PlantUML too — sequence, state, activity, class, ER, use case, component, deployment, mind map, WBS, nwdiag and C4-PlantUML — pasted, opened as a .puml file, or lifted out of a Markdown page.
• Exports to Mermaid for READMEs and wikis, copied as text or as a ready-made Markdown block, and read back here unchanged.
• Drag shapes in, connect them from the dots on their sides, and type straight onto them.
• Elbow connectors route round the shapes in their way, and sequence messages stay horizontal and can be dragged up and down.
• Crow's-foot cardinality, UML arrowheads and C4 styling built in, rather than drawn with lines by hand.
• One-click auto layout for layered graphs, sequences and mind maps, plus align, distribute and stacking order.
• Undo and redo, copy, paste and duplicate, and arrow keys to nudge a shape into place.
• Exports PNG, SVG and PDF, and saves a diagram file that opens again with everything editable.
• Everything stays in the browser: kept between visits in local storage, never uploaded.

Limits

• Mermaid's class, Gantt and pie charts, and PlantUML's Gantt, timing, object, JSON and wireframe diagrams, are not read; nor is PlantUML's old activity syntax with (*), or its preprocessor. Exporting to Mermaid keeps what Mermaid can say — shapes Mermaid lacks become coloured rectangles and positions are Mermaid's own — and lists what it simplified.
• An imported Mermaid or PlantUML diagram is laid out afresh by this editor, so it will not be positioned exactly as the original draws it, and PlantUML swimlanes stack rather than sit side by side.
• Connectors join shape centres side to side; there are no fixed connection points or hand-placed bends.
• The PDF is a high-resolution picture of the diagram rather than vector paths, so its text cannot be selected.
• Auto layout repositions every shape, so hand-placed positions are lost when it is run — undo brings them back.
• The draw.io and Visio formats are not read or written.

Frequently asked questions

Where is my diagram saved?

In this browser's local storage, updated as you work, so closing the tab and coming back offers it again. That copy lasts only until you start another diagram or clear site data — use Save to keep a file you can open here again, or put in version control.

Can I import from Mermaid or PlantUML, or export to Mermaid?

Yes. Choose Import Mermaid on the start screen, or Mermaid in the ribbon, and paste it — or just paste it anywhere on the page, or open a .mmd or Markdown file. Flowcharts, sequence, state, ER, mind map, C4 and architecture-beta diagrams are read; each comes in as the matching kind here, with a flowchart becoming an activity diagram. PlantUML is read the same way — paste it, or open a .puml file — and the importer tells the two apart itself. Lines it cannot read are listed after the import. To go the other way, choose Mermaid on the Export tab and copy the text, copy it as a Markdown block, or download it as a .mmd file.

How do I connect two shapes?

Hover the first shape until dots appear on its sides, then drag from a dot and let go over the second shape. Letting go on empty canvas makes a copy of the first shape there, already connected. Select a connector to change its label, route, line style and ends.

How do I draw a sequence diagram message?

Hover a lifeline: a dot follows the pointer down it. Drag from the dot to another lifeline and the message is drawn across at that height. Drag a message up or down to reorder it, drag it back to its own lifeline for a self-call, and use Reply for the dashed return.

Can I put shapes inside a group, boundary or subnet?

Yes. Drag a shape so it sits wholly inside the group and let go; it joins it and moves with it from then on. Drag it out to take it out again, or pick its group under Inside in the panel on the right.

Which export should I use?

SVG for documents and wikis that accept it, because it stays sharp at any size; PNG for chat, slides and anywhere that wants a picture; PDF for printing or attaching. Keep the diagram file too — it is the only one that opens here again for editing.

Related tools

• SVG Converter — Draw an SVG at any size, or wrap a bitmap in one
• SVG Path Viewer — Draw path data and read back what it contains
• Markdown Viewer — Read a Markdown file the way it is meant to look, with its contents beside it
• QR Code Generator — Create scannable QR codes as SVG
• UUID Generator — UUID v1 to v7 — generate any version, or read what one encodes
• ULID / CUID Generator — Sortable, collision-resistant identifiers — and the timestamp inside one

More Generators tools

• UUID Generator — UUID v1 to v7 — generate any version, or read what one encodes
• ULID / CUID Generator — Sortable, collision-resistant identifiers — and the timestamp inside one
• Nano ID Generator — Short, URL-safe random identifiers — and what the length actually buys
• KSUID Generator — Sortable 27-character identifiers with a second of time and 128 bits of randomness
• TypeID Generator — Type-prefixed identifiers over UUID v7, readable and still a UUID underneath
• ObjectID Generator — MongoDB's twelve bytes — a timestamp, a process value and a counter
• Barcode Generator — Draw QR, Data Matrix, Code 128, EAN and more as SVG
• QR Code Generator — Create scannable QR codes as SVG
• UPI QR Code Generator — Make a UPI payment QR code that any UPI app can scan to pay you
• Random String — Random identifiers from a chosen alphabet
• Lorem Ipsum — Placeholder paragraphs, sentences or words
• Fake Data — Synthetic people and companies as JSON, CSV or SQL
• Random Number Generator — Draw uniformly random integers or decimals in a range, with or without repeats