Import from Mermaid

Paste Mermaid into the code panel and it offers a one-click Convert. The transpiler rewrites every Mermaid diagram type into this language, mapping each onto the closest family the canvas can render. Only a genuinely unknown header reports "not supported yet"; a bad line within a known type degrades to a diagnostic, never a thrown error.

Mermaid is an import format; Koboyo diagram code is the editing format. After converting, you edit and generate the result like anything else.

An example#

This Mermaid flowchart:

flowchart TD
  A[Start] --> B{Ready?}
  B -->|yes| C[Ship]
  B -->|no| D[Wait]
  D --> B

converts to Koboyo code that renders like this:

flowchart
Start [rectangle] -> Ready [diamond]
Ready -> Ship [rectangle]: yes
Ready -> Wait [rectangle]: no
Wait -> Ready

The converted flowchart, drawn in the canvas style.

Every Mermaid type#

Mermaid type	Family	Notes
`flowchart` / `graph`	flowchart	Every legacy bracket shape and `@{ shape: … }` name, `&` fan-out, `subgraph` to group, all link styles, `style`/`class`/`:::` to colour, `click` to link, `@{ icon }` to icon.
`swimlane-beta`	bpmn	Each top-level `subgraph` becomes a lane; cross-lane edges become handoffs.
`sequenceDiagram`	sequence	`participant … as`, `->>`/`-->>`/`-x`/`-)`, `+`/`-` activations, `loop`/`alt`/`opt`/`par`/`break`/`critical`, notes.
`classDiagram`	class	Classes to UML boxes with attribute and method compartments; `<\|--` / `*--` / `o--` / `..>` to their UML arrowheads.
`stateDiagram(-v2)`	statemachine	`[*]` to start/end, composite `state X { }` to group, `<<choice>>` to diamond.
`erDiagram`	erd	Crow's-foot `\|\|--o{` to `1:1` / `1:N` / `N:M`; attributes to `name type pk/fk`.
`journey`	flowchart	Sections to groups, tasks chained, score to colour.
`gantt`	flowchart	Sections to groups, `after` to edges, status to colour.
`pie`	chart (pie)	Rows to label : value.
`mindmap`	mindmap	Root to central, indentation to branches.
`timeline`	mindmap	Title to central, sections to branches.
`quadrantChart`	flowchart	Four quadrant groups, points placed by `[x, y]`.
`requirementDiagram`	flowchart	Requirements and elements to nodes, typed edges.
`gitGraph`	flowchart	Commits chained as circles; branch, merge, cherry-pick.
`C4*`	architecture	Person to user icon, SystemDb to cylinder, Boundary to group.
`xychart-beta`	chart	`x-axis` to categories, `bar` / `line` to series.
`sankey-beta`	flowchart	CSV `src,target,value` to weighted edges.
`block-beta`	flowchart	Blocks to nodes, `block:id` to group.
`packet-beta`	flowchart	Byte fields to grouped nodes.
`kanban`	flowchart	Columns to groups, items to sticky notes.
`architecture-beta`	architecture	Groups and services with icon or shape.
`radar-beta`	chart (radar)	Axes to categories, curves to series.
`treemap-beta`	mindmap	Hierarchy to branches and children.
`zenuml`	sequence	Messages mapped; control flow simplified.

Connectors are flipped#

Mermaid's connector semantics are the opposite of ours, and the transpiler accounts for it: solid --> becomes ->, dashed -.-> becomes -->, thick ==> becomes ->, and <--> / o--o / x--x become <->.

Preprocessing#

Common to all types: a leading --- … --- frontmatter block is read for its title: (the rest dropped), %%{ init … }%% directives are stripped, and %% starts a comment. Every input line maps to one output line, so diagnostics point at the converted text.