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, infographics, 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.

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