Accent renders text-based diagrams on the server. You write the source in a fenced code block, and the page gets inline SVG. Search engines and reader modes see the picture, and the browser loads no diagram library. This demo runs with diagrams.render_mode: server, so the development server shows the same SVG as a production build.

Mermaid flowchart

Tag a fenced block with mermaid:

mermaidsvgbobnoMarkdownDiagram block?Mermaid rendererSvgbob rendererSyntax highlighterInline SVG

Mermaid sequence diagram

The first line of the block selects the dialect. The renderer covers all 23 Mermaid dialects, from sequenceDiagram to gantt and pie:

No diagram JS tofetchGET/posts/diagrams-tourRendermarkdown anddiagramsHTML with inlineSVGAccentBrowserBrowserAccent

With a caption

The {% diagram %} tag adds a caption and alt text. It renders through the same pipeline and the same cache as a fenced block:

62%26%12%HTMLCSSJSPage weight
Where the page weight goes

Svgbob

Svgbob turns ASCII art into clean SVG. Tag a fenced block with svgbob or the shorter bob alias:

SVG .md Accent cache

The renderer is pure Rust, so it works everywhere Accent does.

Caching

Each rendered SVG is cached by a hash of its source and its render options. A repeat build reuses the cache, and an edit to one diagram re-renders only that diagram.