llms.txt
# Diagramly
> Free hand-drawn diagram maker. Type “Client -> API -> DB” or ask the AI: architecture, flowcharts and cheat sheets in six looks. No sign-up.
Sketch systems at the speed you think. Diagramly is a free web app for hand-drawn diagrams: system architecture, flowcharts, data models, state machines and mind maps. No account; sketches stay in the browser until shared, and a shared sketch travels entirely in its URL.
## Pages
- [Home](https://diagramly.xyz/): what Diagramly does, with live examples
- [Canvas](https://diagramly.xyz/app): the editor
- [Gallery](https://diagramly.xyz/d): diagrams people have published, each at /d/{slug}
- [Templates](https://diagramly.xyz/templates): published diagrams offered as starting points
- [Cheat sheets](https://diagramly.xyz/cheatsheets): one-page explainers (RAG architectures, Docker, Git, SQL, HTTP…) drawn with the same blocks
- [Blog](https://diagramly.xyz/blog): guides and what's new (RSS at /blog/feed.xml)
## Features
- Type a line like “Client -> API -> DB” and it becomes an auto-laid-out diagram
- Ask the AI: describe a system in plain words and it draws it; ask for a change and it edits the diagram on the canvas; one conversation per diagram, kept with it
- Tidy: one-click auto-layout that keeps sections whole, with smart connectors routed around the shapes
- Pen, highlighter, shapes and arrows that stay attached to shapes
- Radial tool dial at the pointer (right-click, long-press or Space)
- About 30 block types: tables with keys, API routes, code, checklists, metrics, frames
- Around 90 icons and ready-made architecture patterns
- Six looks for the whole canvas: paper, notebook, blueprint, chalkboard, whiteboard marker and ink & neon, with contrast-checked colours
- Emphasis marks: hero shapes, highlighter, numbered badges, stamps, tape, pencil shading, check / cross / warning marks
- Cheat-sheet blocks that drop in as plain nodes: bullets, steps, checklists, flows, compare tables, pros / cons, worked examples, cards, takeaways, best practices
- A grid node edited cell by cell with Tab and Enter, and captions under any node
- Frames that group, nest and collapse; replica stacks; self-loops; crow’s-foot ends
- Atlas minimap and pinned views on keys 1–9
- The whole sketch is shared in the URL; export PNG, SVG, JSON and Mermaid; import Mermaid
- Presentation mode: frames and pinned views become slides that draw themselves in
- View-only links and embeds for Notion, docs and blogs
- Publish a diagram as its own public page that others can present and copy, offer it as a template on /templates, or tag it as a cheat sheet for /cheatsheets
- Public pages answer oEmbed, so a pasted link unfurls into the live diagram in Notion and Confluence
- Version history with automatic snapshots, named versions and one-click restore
- Folders, tags and search across every saved diagram
- Free, no sign-up, runs in the browser; sketches stay on your device until you share them
## Guides
- [Six looks, cheat-sheet blocks and a grid you fill cell by cell](https://diagramly.xyz/blog/cheat-sheets-looks-and-blocks): Diagramly now draws in six looks, adds emphasis marks, drops ready-made cheat-sheet blocks onto the canvas as plain nodes, and publishes one-page explainers.
- [Describe a system and the AI draws it, then Tidy lays it out](https://diagramly.xyz/blog/ai-diagram-chat-tidy-and-templates): Diagramly now draws from a sentence, edits on request, lays a messy diagram out in one click, routes arrows around shapes, and lets Pro users share templates.
- [Export a diagram as PDF, a slide deck, or a GIF of it drawing itself](https://diagramly.xyz/blog/export-pdf-slides-gif-and-video): Diagramly now exports PDF for everyone, and for Pro a 16:9 slides PDF plus an animated GIF or MP4 of the diagram sketching itself in, made for feeds.
- [Post a diagram on LinkedIn, X or GitHub that people actually stop for](https://diagramly.xyz/blog/post-diagrams-on-linkedin-x-and-github): Hand-drawn diagrams stand out in a feed, and one that draws itself stops the scroll. Which Diagramly export to use on LinkedIn, X, GitHub and Slack, and how.
- [Present a diagram like a talk, without making slides](https://diagramly.xyz/blog/present-a-diagram-like-a-talk): Diagramly's Present mode turns frames and pinned views into slides. The camera flies between them and each shape sketches itself in as you speak.
- [Publish a diagram as a page, embed it anywhere, and keep every version](https://diagramly.xyz/blog/publish-embed-and-keep-every-version): How Diagramly Pro publishes a diagram to its own public page, embeds it live in Notion or a blog, and keeps a version history you can restore from.
- [Put an architecture diagram in your README, your docs and your portfolio](https://diagramly.xyz/blog/embed-architecture-diagrams-in-readme-docs-and-portfolio): Get a Diagramly diagram into a GitHub README, Notion, a blog or a portfolio: a committed SVG, a GIF, a live image URL, or an embed that updates itself.
- [System design interviews: practise, present and hand in the diagram](https://diagramly.xyz/blog/system-design-interview-diagrams): How to use Diagramly for system design interview prep, in the interview itself, and for the PDF or slide deck you send afterwards. No whiteboard required.
- [Introducing Diagramly, a hand-drawn diagram maker that runs in your browser](https://diagramly.xyz/blog/introducing-diagramly): Diagramly turns a typed line like "Client -> API -> DB" into a hand-drawn diagram. Free, no sign-up, and the sketch stays on your device until you share it.
- [Type a line, get a diagram: the sketch line explained](https://diagramly.xyz/blog/type-a-line-get-a-diagram): How Diagramly's text-to-diagram syntax works. Arrows, labels, branches, decisions and shape prefixes, with examples you can paste straight into the canvas.
## Sketch line syntax
Press / in the canvas and type, for example:
- `Client -> API gateway -(HTTPS)-> Orders, Payments -> Orders DB` (arrows, a labelled arrow, a branch)
- `Upload -(file)-> Worker -> queue: Jobs -- Notifier` (`queue:`, `db:`, `user:` prefixes pick shapes; `--` is a plain line)
- `Visitor -> {Signed in?} -> Dashboard, Login page` (`{…}` is a decision)
## Templates
- [Product flow](https://diagramly.xyz/app?template=reel-vault): Illustrated steps + explainer cards
- [Pipeline](https://diagramly.xyz/app?template=voice): Auto-laid-out steps with captions
- [System architecture](https://diagramly.xyz/app?template=arch): Services, stores, elbow routing
- [RAG pipeline](https://diagramly.xyz/app?template=rag): Two inputs merging, auto layout
- [Flowchart](https://diagramly.xyz/app?template=flow): Top-down decision with branches
- [Mind map](https://diagramly.xyz/app?template=mindmap): Sticky notes with curved links
- [Cloud regions](https://diagramly.xyz/app?template=regions): Nested frames, replicas, a collapsed group, notes
- [State machine](https://diagramly.xyz/app?template=states): Self-loops and two-way transitions
- [Data model](https://diagramly.xyz/app?template=er): Tables with keys and crow’s-foot links
- [Cheat sheet](https://diagramly.xyz/app?template=cheatsheet): A three-column sheet of cards, flows and checklists
- [Blank](https://diagramly.xyz/app?template=blank): Two nodes, one edge
