# System Diagram Maker

URL: https://discuvr.org/system-diagram/
Last updated: 2026-11-08
MCP tool: `draw_system_diagram`

Draw architecture and flow diagrams by typing A -> B. Auto layout, groups that fold for a high-level view, numbered steps, PNG and SVG export.

On a whiteboard tool you draw every box, every arrow and line them up by hand. Here you type what talks to what, one line per arrow, and the layout is done for you. Wrap related services in a group and fold it to one box when you need the big picture; open it again for the detail.

## What it does

- Automatic layout, left to right or top to bottom, that updates as you type.
- Shapes picked from the name: DB becomes a database, Kafka a queue, User a person, a name ending in ? a decision.
- Groups that fold into one box, so one diagram serves both the high-level and the low-level view.
- Drag, connect, rename and add boxes on the canvas too; every change is written back to the text.
- Numbered steps, a hand-drawn style, PNG and SVG export, and share links. Nothing is uploaded.

## How it works

1. Type lines like User -> Web App -> Orders DB, or start from a template.
2. Add groups with Name { ... }, labels after a colon, and --> for async calls.
3. Switch between Overview and Details, tidy boxes by dragging, then export or copy a link.

## Questions

**How is this different from Excalidraw?**

Excalidraw is a free-form whiteboard: you place every shape and arrow yourself. Here the text is the diagram and the layout is automatic, so adding a service is one line instead of drawing and re-aligning boxes. For a loose sketch, Excalidraw is still the better fit.

**How do I show both a high-level and a low-level view?**

Put related boxes in a group with Name { ... }. Overview folds every group into a single box and merges the arrows; Details opens them again. You can also fold one group at a time from its header.

**Is my diagram stored anywhere?**

No. It is drawn in your browser and kept in your browser storage. A share link carries the diagram inside the link itself, after the # sign, which browsers never send to the server.

**Can I paste a Mermaid flowchart?**

Not directly; there is no Mermaid import. Plain lines such as A -> B carry over, but three things differ. Delete the graph TD header, or it becomes a box, and write direction: down instead. Remove Mermaid labels in square brackets, because text in [ ] here is read as shape and colour tags. And --> here draws a dashed arrow for an async call, where in Mermaid it is an ordinary arrow; use -> for a solid one.

**What can I write besides A -> B?**

A -> B: label puts a label on the arrow, A --> B draws a dashed arrow, A <-> B a two-way one and A <- B points backwards. Name [db, blue] sets a shape and a colour; the shapes are service, db, cache, queue, actor, client, storage, external, decision, terminal and note. title: names the diagram, direction: down lays it out top to bottom, and a line starting with # or // is a comment. One diagram holds up to 300 boxes, 600 arrows and 20,000 characters of text.

## More in Developer Tools

- [JSON Formatter](https://discuvr.org/json-formatter/)
- [Python Formatter](https://discuvr.org/python-formatter/)
- [HTML Viewer](https://discuvr.org/html-viewer/)
- [IP Subnet Calculator](https://discuvr.org/ip-subnet-calculator/)

## Often used with

- [Text Compare](https://discuvr.org/text-diff/)

---

Part of Discuvr (https://discuvr.org/): Discuvr is a collection of free, focused tools for day-to-day professional work - office and data utilities, legal and compliance helpers, privacy and security checks, and developer formatters. Every tool has its own page, and most can also be called from ChatGPT or Claude over MCP.