Visual Lab
Sequence Diagram Maker
Describe who sends what to whom, in order, and copy an image URL that renders it anywhere Markdown works. The diagram lives in the URL, so there is nothing to upload.
https://api.devkithub.tech/api/v1/render/sequence?src=eyJ0aXRsZSI6IkxvZ2luIGZsb3ciLCJ0aGVtZSI6ImxpZ2h0IiwicGFydGljaXBhbnRzIjpbeyJpZCI6IlUiLCJsYWJlbCI6IlVzZXIiLCJraW5kIjoiYWN0b3IifSx7ImlkIjoiQVBJIiwibGFiZWwiOiJBUEkiLCJraW5kIjoicGFydGljaXBhbnQifSx7ImlkIjoiREIiLCJsYWJlbCI6IkRhdGFiYXNlIiwia2luZCI6InBhcnRpY2lwYW50In1dLCJzdGVwcyI6W3sidHlwZSI6Im1lc3NhZ2UiLCJmcm9tIjoiVSIsInRvIjoiQVBJIiwibGFiZWwiOiJQT1NUIC9sb2dpbiIsImxpbmUiOiJzb2xpZCIsImFycm93IjoiZmlsbGVkIn0seyJ0eXBlIjoibWVzc2FnZSIsImZyb20iOiJBUEkiLCJ0byI6IkRCIiwibGFiZWwiOiJTRUxFQ1QgdXNlciIsImxpbmUiOiJzb2xpZCIsImFycm93IjoiZmlsbGVkIn0seyJ0eXBlIjoibWVzc2FnZSIsImZyb20iOiJEQiIsInRvIjoiQVBJIiwibGFiZWwiOiJyb3ciLCJsaW5lIjoiZGFzaGVkIiwiYXJyb3ciOiJmaWxsZWQifSx7InR5cGUiOiJub3RlIiwicGxhY2VtZW50Ijoib3ZlciIsInBhcnRpY2lwYW50cyI6WyJBUEkiXSwidGV4dCI6InZlcmlmaWVzIGFuZCBzaWducyBhIEpXVCJ9LHsidHlwZSI6Im1lc3NhZ2UiLCJmcm9tIjoiQVBJIiwidG8iOiJVIiwibGFiZWwiOiIyMDAgKyB0b2tlbiIsImxpbmUiOiJkYXNoZWQiLCJhcnJvdyI6ImZpbGxlZCJ9LHsidHlwZSI6Im1lc3NhZ2UiLCJmcm9tIjoiVSIsInRvIjoiVSIsImxhYmVsIjoic3RvcmVzIHRoZSB0b2tlbiIsImxpbmUiOiJzb2xpZCIsImFycm93IjoiZmlsbGVkIn1dfQ&format=svg<img src="https://api.devkithub.tech/api/v1/render/sequence?src=eyJ0aXRsZSI6IkxvZ2luIGZsb3ciLCJ0aGVtZSI6ImxpZ2h0IiwicGFydGljaXBhbnRzIjpbeyJpZCI6IlUiLCJsYWJlbCI6IlVzZXIiLCJraW5kIjoiYWN0b3IifSx7ImlkIjoiQVBJIiwibGFiZWwiOiJBUEkiLCJraW5kIjoicGFydGljaXBhbnQifSx7ImlkIjoiREIiLCJsYWJlbCI6IkRhdGFiYXNlIiwia2luZCI6InBhcnRpY2lwYW50In1dLCJzdGVwcyI6W3sidHlwZSI6Im1lc3NhZ2UiLCJmcm9tIjoiVSIsInRvIjoiQVBJIiwibGFiZWwiOiJQT1NUIC9sb2dpbiIsImxpbmUiOiJzb2xpZCIsImFycm93IjoiZmlsbGVkIn0seyJ0eXBlIjoibWVzc2FnZSIsImZyb20iOiJBUEkiLCJ0byI6IkRCIiwibGFiZWwiOiJTRUxFQ1QgdXNlciIsImxpbmUiOiJzb2xpZCIsImFycm93IjoiZmlsbGVkIn0seyJ0eXBlIjoibWVzc2FnZSIsImZyb20iOiJEQiIsInRvIjoiQVBJIiwibGFiZWwiOiJyb3ciLCJsaW5lIjoiZGFzaGVkIiwiYXJyb3ciOiJmaWxsZWQifSx7InR5cGUiOiJub3RlIiwicGxhY2VtZW50Ijoib3ZlciIsInBhcnRpY2lwYW50cyI6WyJBUEkiXSwidGV4dCI6InZlcmlmaWVzIGFuZCBzaWducyBhIEpXVCJ9LHsidHlwZSI6Im1lc3NhZ2UiLCJmcm9tIjoiQVBJIiwidG8iOiJVIiwibGFiZWwiOiIyMDAgKyB0b2tlbiIsImxpbmUiOiJkYXNoZWQiLCJhcnJvdyI6ImZpbGxlZCJ9LHsidHlwZSI6Im1lc3NhZ2UiLCJmcm9tIjoiVSIsInRvIjoiVSIsImxhYmVsIjoic3RvcmVzIHRoZSB0b2tlbiIsImxpbmUiOiJzb2xpZCIsImFycm93IjoiZmlsbGVkIn1dfQ&format=svg" alt="Sequence diagram" />The syntax
One statement per line. Participants are created the first time they are mentioned, in the order they appear, so a simple diagram needs no declarations at all.
- A->B: text
- A solid arrow — a call or a request.
- A-->B: text
- A dashed arrow. The convention for a reply or return value.
- A->>B / A-->>B
- The Mermaid spellings, accepted as the same thing.
- A-xB: text
- A cross at the tip, for a message that is lost or fails.
- A->A: text
- A self-message, drawn as a loop back to the same lifeline.
- participant DB as Database
- Fixes the order and gives a display name.
- actor U as User
- Draws a stick figure — the convention for a person.
- note over A: text
- A note. Also "note left of A" and "note right of A".
- note over A,B: text
- A note spanning two participants.
- title: text
- A heading rendered into the image.
- theme: dark
- Renders on a dark background.
- # comment
- Ignored. So are %% and //.
How the embed works
The whole document is encoded into the image URL. When something requests that URL — GitHub's image proxy, a wiki, an email client — the server decodes it, computes the layout and renders an SVG or PNG on the spot. Nothing is stored, and no account is involved.
Because the output depends only on the URL, the same URL always produces the same bytes. That is what makes the response safe to mark immutable: every cache between the reader and this server can keep it forever, so an embed in a popular README costs almost nothing to serve. It also means there is no stored document that can be deleted out from under your README.
The preview above is a plain image tag pointed at that same endpoint, not a copy rendered locally. It is the request your README will make, which is the only way a preview can be trusted.
Questions
Why type a sequence diagram instead of drawing it?
A sequence diagram is a list of "A sends X to B" in order, and typing that is faster than dragging arrows between lifelines. It also diffs cleanly in version control, which a drawing does not.
Does it accept Mermaid syntax?
The message, note and participant forms overlap deliberately, so most Mermaid sequence diagrams paste in unchanged. It is not a full Mermaid parser — anything it does not recognise is reported with a line number rather than silently skipped.
Where is my diagram stored?
Nowhere. The whole document is encoded into the image URL, and the server renders it on demand from the URL itself. There is no record that can be deleted out from under your README, and nothing to keep in sync.
Is there a size limit?
The document travels in a URL, and proxies commonly refuse a request line over about 8,000 characters. The editor warns when a diagram gets close. For larger documents, POST to the render endpoint instead.