How to use uml.singsk.com
The complete guide to diagram-as-code with PlantUML on uml.singsk.com — a free online tool that turns text into UML diagrams, for humans and for AI agents.
What is diagram-as-code?
Diagram-as-code means writing a diagram as plain text instead of dragging shapes. Text is versionable in git, reviewable in pull requests, and — crucially — generatable by machines. PlantUML is the most widely used diagram-as-code language for UML: a few readable lines become a rendered sequence, class or activity diagram.
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
@enduml
That text renders as a complete UML sequence diagram — automatically laid out by the official PlantUML engine.
Quick start (60 seconds)
- Open uml.singsk.com — no account, no install.
- Type PlantUML code in the left panel. Autocomplete (~150 keywords), syntax highlighting and brace folding are built in.
- Watch the right panel render the diagram live, about half a second after you stop typing.
- Share or export — copy the render URL from the bottom bar, or Settings → Download SVG / Download PNG.
The editor, briefly
- Left panel — "PlantUML Editor (AI-first supported)": source with highlighting, autocomplete, folding (Ctrl+Alt+L), line duplicate (Ctrl+D). Ctrl+wheel changes font size. Its 3-dot menu adds Full screen, Dark/Light mode, Indentation, Duplicate, Print and Help.
- Right panel — live SVG/PNG preview. Drag to pan; Ctrl/Shift+wheel to zoom. Your pan/zoom and layout are remembered across reloads.
- Splitter — drag to resize the panels; the diagram tracks in real time. Settings → Swap panels flips the layout.
- Format selector — switch SVG ↔ PNG. Decode — paste any PlantUML render URL to recover its source code.
- Settings menu — Full screen, Swap panels, Download SVG/PNG, AI Documents, Dark/Light mode, Print (diagram, all, or to PDF with page arrangement), Reset (re-centers the diagram at zoom 1), and About (near-fullscreen overlay of the about page).
Sharing: the diagram is a URL
Every diagram compresses into a URL token, so a whole diagram travels as one link:
https://uml.singsk.com/plantuml/svg/?src=SoWkIImgAStDuNBCoKnELT2rKt3AJx9IS2mjoKZDAybCJYp9pCzJ24ejB4qjBk42oYde0jM05MDHLLoGdrUS2W00
Paste that in chat, docs, or an <img> tag — it renders on demand. The Decode button (or POST /api/decode) reverses any token back to source.
Size limit: a share URL works while the encoded token is at most 16,000 characters (about a 16 KB URL — roughly 40–60 KB of PlantUML source). Larger diagrams still render in the editor (it switches to the POST API automatically) and the URL field tells you so; share them as a downloaded SVG/PNG or as source text. Agents: POST /api/encode returns url_ok, and POST /api/render accepts up to 5 MB.
22 diagram & reference types
Sequence, use case, class, activity, component, state, object, deployment, timing, network, wireframe, ArchiMate, Gantt, chronology, mindmap, WBS, EBNF, regex, JSON, YAML and more — each documented with examples in the local syntax reference. The machine-readable catalog (every example render-verified) is at /api/syntax.
Automatic diagrams — the AI-first way
uml.singsk.com is built to be operated by AI agents. LLMs are already good at writing PlantUML — point one at the self-describing API and you get fully automatic diagram generation: requirements in, rendered architecture/sequence/class diagrams out.
# Any agent or script: PlantUML code in, diagram out
curl -X POST https://uml.singsk.com/api/render \
-H "Content-Type: application/json" \
-d '{"text":"@startuml\nDev -> CI: push\nCI --> Dev: build ok\n@enduml","format":"svg"}' \
-o diagram.svg
- Agent entry points: /api/ (discovery), /api/openapi.json, /llms.txt, /llms-full.txt (full agent guide)
- Endpoints: render, encode, decode, syntax catalog, health, about — all anonymous, CORS-open
The SingSK family
uml.singsk.com (this tool — free PlantUML editing and rendering) is built by SingSK, which also operates ai.singsk.com — the SingSK AI workspace where AI agents do real work, including generating diagrams through this very service. Diagram-as-code plus AI-first APIs is what makes automatic diagramming practical.
Open the editor About API docs