Every diagram POSTs its source to a Kroki endpoint. The default is the public https://kroki.io. Override per-element with endpoint="…" or doc-wide with <rd-page diagram-endpoint="…">. For sensitive content, point at a self-hosted Kroki or PlantUML server.

The most familiar of the bunch. Flowcharts, sequence diagrams, ER diagrams, gantts, state machines.

flowchart LR A[Agent writes .html] --> B{richdoc lint} B -- OK --> C[Open in browser] B -- errors --> D[Fix and re-run] D --> B C --> E[Human review]

Wider UML coverage than Mermaid; understands !theme directives. Dark-mode docs auto-inject !theme cyborg-outline unless you set theme="…" or theme="none".

@startuml actor Agent participant "richdoc CLI" as CLI database Browser Agent -> CLI : richdoc lint doc.html CLI --> Agent : ok Agent -> Browser : open doc.html Browser --> Agent : rendered page @enduml

Compact syntax for service / architecture diagrams. Strong defaults, minimal ceremony.

Browser -> API: POST /login API -> DB: verify credentials DB -> API: ok API -> Browser: set session cookie

The classic. Useful when you want explicit node and edge styling.

digraph G { rankdir=LR; node [shape=box, style=rounded]; Source -> Compile -> Link -> Binary; Source -> Test -> Binary [style=dashed]; }

Schema as code. Renders an ERD with cardinality.

Table users { id uuid [pk] email varchar [unique] created_at timestamp } Table posts { id uuid [pk] author_id uuid [ref: > users.id] body text } Table comments { id uuid [pk] post_id uuid [ref: > posts.id] author_id uuid [ref: > users.id] body text }

Compact SQLite-flavoured diagrammer; good for box-and-arrow figures inside technical prose.

box "Client" arrow right "request" above box "API" arrow right "query" above box "DB"

If Kroki is unreachable or the browser doesn't support CompressionStream, the diagram source renders as a code block so the content still travels. The corner maximize button opens a shared fullscreen SVG pan/zoom viewer (mouse wheel, drag, 0/1/arrows, Esc).