Sequence Diagram

Create a sequence diagram from Mermaid syntax, preview changes live, and export SVG or PNG

Sequence Diagram turns typed Mermaid sequence text into a live drawing in the workspace tab, then hands you SVG, PNG, a copy, or a print job. The README is open and the API flow is already in your head. This sequence diagram maker puts that call order on the page from typed Mermaid sequence text. 🚀 Three steps 1. Click the icon. The workspace tab opens with an editor on the left and an empty canvas on the right. 2. Type the sequence, or pick Login, Checkout, or Webhook. The snippet row inserts participants, messages, replies, notes, and blocks such as alt, loop, or par. 3. Press Export SVG, PNG, Copy, or Print. The file is ready in your downloads or in the print dialog. ⚙️ What this sequence diagram editor actually does 1️⃣ Participants - each name gets a lifeline. Actors sit along the top; the drawing grows down the pane, not the page. 2️⃣ Messages - a solid arrow is a call, a dashed arrow is a reply. alt / else, opt, loop, and par wrap the message arrows you already typed. 3️⃣ Notes and activation - a note sits over one or two names; activate / deactivate thicken a lifeline while work is in progress; autonumber labels the calls. 4️⃣ Live preview - a sequence diagram updates after you pause typing. A broken line names the exact row, keeps the previous picture, and holds exports until you fix it. 5️⃣ Files - SVG with embedded source, PNG at 1×, 2× or 4× with a 4096px long-side limit, copy to clipboard for the PNG or the source text, or a print through the system dialog 📝 What a sequence diagram is for ➤ drop the call order into developer documentation before the review ➤ draw a sequence diagram of a login, a checkout, or a webhook in one sitting ➤ show the failure path next to the happy path without opening a design file ➤ reopen yesterday's SVG, change one message, and export again ➤ print a UML diagram for a design review the same morning 🧩 Who needs a sequence diagram • Backend and frontend developers writing README files and developer documentation • Analysts putting a call order into a spec • Architects who need sequence diagrams on a slide before the meeting 📐 How the picture is drawn from the text Drawing a sequence diagram from text is the point of this workspace: you type, the names and the arrows update on the right. Choose between default, dark, neutral, and sketch themes for each diagram. Zoom fits a wide drawing to the pane while tall sequence diagrams remain scrollable. Recents lists recent sequence diagrams so you can reopen yesterday's drawing. The same Mermaid syntax is what GitHub and Notion already render. Paste a block you already have, or start from a sample and edit. HTML in labels is escaped; a less-than sign in a payload stays visible as text. 💾 Recents and files - Source text sits in the editor and in Recents, so yesterday's drawing is one click away. - Recents lists recent drawings. Open one, change a message, and use Export SVG or PNG again. 🔒 Honest limits • Sequence pictures only: other diagram types are outside this version • Mermaid sequence syntax only: PlantUML syntax, other diagram languages, and imports are outside it • PDF uses the system print dialog • No AI describe-to-picture, and no watermark on the export 📚 How to get a picture into the document 1. Open the workspace and type the first message, or pick a sample. 2. Name the people in the story, then add the calls. A reply uses a dashed line. Wrap alt / loop / par when the story branches. 3. If a line breaks, read the row number under the editor, fix that row, and watch the previous picture stay until the new one draws. 4. Press the SVG button for docs that want a vector, PNG for a slide, or copy and paste. Print when you want paper. ❓ Frequently asked questions 📌 Can I reopen a drawing next week? 💡 Yes. The SVG file embeds the source. Open that file here, or pick it from Recents. 📌 What if a line is wrong? 💡 The workspace names the line, keeps the last good picture, and holds exports until you fix it. 📌 Which files come out? 💡 SVG with embedded source, PNG at 1×, 2× or 4× with a 4096px long-side limit, clipboard PNG and source text, or a system print job 🎯 Install Sequence Diagram, type the first message, and drop sequence diagrams into the spec in the same sitting. Exported as SVG, a sequence diagram carries its Mermaid source inside the file, so the drawing and its text travel together.