{"slug": "the-link-is-the-diagram-why-i-built-flowdiagram-a-free-diagram-tool-your-ai-can", "title": "The link is the diagram: why I built FlowDiagram, a free diagram tool your AI can draw in", "summary": "A data architect known as Tuna built FlowDiagram, a free browser-based diagramming tool that encodes entire diagrams into the URL fragment after the '#', so links never touch a server and require no account. The tool ships a single Markdown skill file that teaches coding assistants such as Claude Code, Cursor and GitHub Copilot to emit a .flow.json document plus a one-click share link, and it includes 1,160 vendor logos, entity-relationship modeling, and DDL/DBML/Mermaid import and export.", "body_md": "*By Tuna, the maker of [FlowDiagram](https://flowdiagram.net)*\n\nEvery engineering team I have worked with has the same graveyard: a Confluence page with an architecture diagram that was last true two re-orgs ago. Somebody drew it in a heavyweight tool, exported a PNG, pasted it in, and the source file now lives on a laptop that was returned to IT in 2023.\n\nI'm a data architect. I spend a lot of my week drawing three kinds of pictures: integration landscapes (which system talks to which, over what), data pipelines (source → ingest → transform → serve), and ER models. I wanted one tool that did all three well, that didn't make anyone sign up to *look* at a diagram, and that an AI assistant could write for me without screenshots or plug-ins.\n\nI couldn't find it, so I built it. It's called **FlowDiagram**, it lives at **[flowdiagram.net](https://flowdiagram.net)**, and it is free: no tiers, no trial, no account.\n\nHere is what makes it different, and why I think it is the right shape of diagram tool for 2026.\n\nClick **Share** (Ctrl+L) and you get a URL. That URL doesn't point at a file on my server. The diagram itself is compressed into the part of the URL after the `#`, which browsers never send to any server.\n\nSo:\n\nDon't take my word for it. Each of these opens a complete diagram:\n\nOpening a link never replaces your work; it adds the diagram as a new page.\n\nMost \"AI diagram\" tools put a model behind a paywall and give you a prompt box. I went the other way.\n\nFlowDiagram publishes a single Markdown skill file, **[flowdiagram.net/flowdiagram.md](https://flowdiagram.net/flowdiagram.md)**, that teaches any coding assistant the document format. Drop it into Claude Code, Codex, Cursor, GitHub Copilot, Zed or Windsurf, then just ask:\n\n\"Draw our order pipeline: Shopify and Stripe into Kafka, dbt in Snowflake, Power BI on top.\"\n\nThe assistant writes a `.flow.json` file *and* a one-click link. Because the output is text, there is no image-model pass and no API key on my side. And because you keep the `.flow.json`, the assistant can **revise** the diagram later instead of regenerating it from scratch.\n\nWhy a skill file and not an MCP server? A server has to be installed and kept running, and its tool definitions ride along on every request. A skill file is one Markdown file that is only read when you actually ask for a diagram. It can't go down.\n\nArchitecture diagrams are about *which* systems, so generic boxes labelled \"DB\" don't cut it. FlowDiagram ships with **1,160 vendor logos**, including every AWS (303), Azure (405) and Google Cloud (175) service icon, plus SAP, Salesforce, Snowflake, Databricks, Kafka, dbt, Airflow, Power BI, OpenAI, Anthropic and hundreds more. Press **B** for the library or **Ctrl+K** and type a name.\n\nHave an internal system with its own logo? **+ Logo** adds it to your library for good.\n\nThe entity mode (**M**) gives you proper tables: typed columns, primary and foreign keys, column comments, and crow's-foot cardinality that attaches to the actual column rows.\n\nAnd it isn't a dead-end drawing:\n\n`CREATE TABLE`, DBML, Mermaid `erDiagram`, a CSV header, or a live Paste DDL in, get a diagram out, edit it, ship DDL back. That loop is the reason I started this project.\n\nTurn on **Flow** for any connector and packets travel along it in the direction the data moves; hollow packets show return traffic. Click any system and FlowDiagram traces everything downstream of it. Save **views** (bookmarked zoom positions) and hit **Present**: the live canvas becomes your slide deck, so animations keep running and nothing goes blurry when you zoom.\n\nThis is the feature that makes architecture reviews faster. \"What breaks if this queue stops?\" becomes one click.\n\nYou don't have to redraw anything:\n\nExport goes to **PNG, SVG, PDF**, Mermaid, DBML, SQL and `.flow.json`.\n\nThere is no account and no sync service, so there is nothing to breach. After the first visit the whole app is cached and **works offline** (everything except the live Snowflake connection). Install it from the address bar and it runs as a desktop or mobile app. Analytics are cookie-free page counts; your diagram content is never touched.\n\nKeep in mind the trade-off that comes with this design: there's no real-time co-editing or team workspace. You collaborate by sending links and committing `.flow.json` files to Git, where they diff like any other text file. For architecture docs that live next to code, I think that's the right trade.\n\nOr let your AI do it: give your assistant **[flowdiagram.md](https://flowdiagram.net/flowdiagram.md)** and describe the system in plain English.\n\nI build FlowDiagram on my own, so feedback shapes it directly. If something's missing, the support address is in the [docs](https://flowdiagram.net/docs/). Tell me what you'd draw first.\n\n*Originally published on [Medium](https://medium.com/@tuna.2020/the-link-is-the-diagram-why-i-built-flowdiagram-a-free-diagram-tool-your-ai-can-draw-in-42df2c5f7f4c).*", "url": "https://wpnews.pro/news/the-link-is-the-diagram-why-i-built-flowdiagram-a-free-diagram-tool-your-ai-can", "canonical_source": "https://dev.to/tuna_pradhan_5ef7bde9c1be/the-link-is-the-diagram-why-i-built-flowdiagram-a-free-diagram-tool-your-ai-can-draw-in-2196", "published_at": "2026-10-16 10:30:35+00:00", "updated_at": "2026-10-16 10:41:17.236271+00:00", "lang": "en", "topics": ["ai-tools", "developer-tools", "agent-protocols", "ai-agents"], "entities": ["FlowDiagram", "Tuna", "Claude Code", "Codex", "Cursor", "GitHub Copilot", "Zed", "Windsurf"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/the-link-is-the-diagram-why-i-built-flowdiagram-a-free-diagram-tool-your-ai-can", "markdown": "https://wpnews.pro/news/the-link-is-the-diagram-why-i-built-flowdiagram-a-free-diagram-tool-your-ai-can.md", "text": "https://wpnews.pro/news/the-link-is-the-diagram-why-i-built-flowdiagram-a-free-diagram-tool-your-ai-can.txt", "jsonld": "https://wpnews.pro/news/the-link-is-the-diagram-why-i-built-flowdiagram-a-free-diagram-tool-your-ai-can.jsonld"}}