Add diagrams support using Kroki

[theletterf]

This PR adds diagrams support for most docs-as-code diagram types using the Kroki universal API. This has the advantage that it doesn't add overhead to the docs site like MermaidJS does, nor lengthens the build process (it doesn't call a CLI tool like D2). The PR currently uses the free Kroki service, though we could easily self-host Kroki.

Supported formats

Accepts mermaid, d2, graphviz, plantuml, ditaa, erd, excalidraw, nomnoml, pikchr, structurizr, svgbob, vega, vegalite, and wavedrom. Uses mermaid by default.

How it works

1. Diagram content is compressed and base64url-encoded according to Kroki's requirements.
2. Diagrams are rendered as SVG images via Kroki, with proper alt text and lazy loading.
3. Invalid or empty diagrams display a clear error message in the output.

Usage example

::::{diagram} mermaid
flowchart LR
  A[Start] --> B{Decision}
  B -->|Yes| C[Action 1]
  B -->|No| D[Action 2]
  C --> E[End]
  D --> E
::::

Implementation details

• DiagramBlock.cs: Parses directive, extracts content and type, handles validation.
• DiagramEncoder.cs: Handles zlib compression and base64url encoding for Kroki compatibility.
• DiagramViewModel.cs and DiagramView.cshtml: Render SVG images or error messages.
• DirectiveBlockParser.cs and DirectiveHtmlRenderer.cs: Integrated new directive into the parsing and rendering pipeline.
• DiagramTests.cs: 16+ unit tests for all supported diagram types and error states.

[github-actions]

🔍 Preview links for changed docs

• docs/syntax/diagrams.md

[reakaleek]

Nice.

Nit: can you add the diagram type to the LLM markdown output as type attribute

In diagrams.md you can see that diagrams are rendered as

<diagram>
  digraph G {
    rankdir=LR;
    A -> B -> C;
    A -> C;
    }
</diagram>

I think it would be nice if it was <diagram type="graphviz">

[theletterf]

@reakaleek Added in 48d7319 — check it out!