Diagram code
Koboyo has a small text language that compiles to canvas diagrams. You write a few lines, hit Generate, and the compiler lays out real, hand-drawn shapes on the board, through the same pipeline the built-in assistant draws with.
One language covers many diagram families: architecture, flowcharts, BPMN, org charts, state machines, sequence diagrams, entity-relationship schemas, UML class diagrams, wireframes, mind maps, and charts. Every Mermaid and eraser.io diagram imports into one of them.
title: Image upload service
Client [browser]
API [aws/api-gateway]
Resize [aws/lambda, green]
Bucket [aws/simple-storage-service, orange]
Postgres [cylinder, blue]
Client -> API: upload
API -> Resize: invoke
Resize -> Bucket: store
Resize --> Postgres: async write
Three properties shape the whole language:
- Forgiving. A malformed line is skipped with a diagnostic, never a fatal error. The compiler always produces the best diagram it can. See error handling.
- Positional. Common properties (icon, colour, shape, fill, frame) need no
key. The word's vocabulary identifies it:
[aws/lambda, green, bold]says the same thing as[icon: aws-lambda, color: green, colorMode: bold], with less typing. See attributes. - Honest. Nothing in the language can express what the canvas cannot render, so what you write is always what you get.
Every family#
Each family has its own page with the full syntax and a gallery of examples.
| Family | What it draws | Header |
|---|---|---|
| Architecture | Systems and services with icons | architecture (default) |
| Flowcharts | Processes and decisions, top-down | flowchart |
| BPMN | Business processes in swimlanes | bpmn |
| Org charts | Reporting hierarchies | orgchart |
| State machines | States and transitions | statemachine |
| Sequence diagrams | Interactions over time | sequence |
| Entity-relationship | Database schemas | erd |
| UML class diagrams | Classes and relationships | class |
| Wireframes | UI mockup screens | wireframe |
| Mind maps | A topic and its branches | mindmap |
| Charts | Bar, line, pie, radar, and more | chart <type> |
Where to start#
New to the language? Read the code panel to learn how to generate and edit, then syntax and core ideas for the handful of rules that never change, and attributes and styling for the words that colour and shape a node. Everything after that is one family at a time.
Just want a quick sketch? Names and arrows alone are a valid diagram, with no declarations and no header:
Frontend -> Backend -> Database