# Diagrams from fenced code blocks

A fence in any of 27 Kroki languages is rewritten into a rendered SVG image: blockdiag, bpmn, bytefield, seqdiag, actdiag, nwdiag, packetdiag, rackdiag, c4plantuml, d2, dbml, ditaa, erd, excalidraw, graphviz, mermaid, nomnoml, pikchr, plantuml, structurizr, svgbob, umlet, tikz, vega, vegalite, wavedrom, wireviz. Mermaid C4 syntax (C4Context / C4Container / C4Component / C4Dynamic) is silently converted to c4plantuml with the matching !include lines.

---

## Where you do it

![The Configure Markdown dialog on Markdown from scratch. The left half holds a mermaid fence containing a graph TD flowchart. The right half shows that flowchart rendered, with Go shopping leading to a](https://help.gocapable.com/images/e077a561-b591-45f2-b52d-d2c5232d2b4b.webp)

The fence stays in the source while the picture it produces appears in the preview beside it.

| **Task**                                         | **Where**                                 |
| ------------------------------------------------ | ----------------------------------------- |
| Publish markdown to a static site                | Capable Sites (Suite or the Sites app)    |
| Export a page containing markdown to Word or PDF | Confluence page → Export                  |
| Control who can edit shared markdown templates   | Capable global settings → Permissions tab |

---

## Settings that affect this

| **Setting**                   | **Where** | **What it does**                                                                                                                                                                                                             |
| ----------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Global settings → Permissions | \-        | Controls edit access to the GLOBAL asset store. Which is what governs who may create Global markdown templates. It is shared with diagrams, images, calendar and search because they all use one Confluence custom content t |

---

## Worth knowing

![A rendered database diagram in a card headed Database Markup Language, with a posts table joined to a users table by user_id and a post_status enum listing draft, published and private.](https://help.gocapable.com/images/ff65a4a5-3576-47fe-98c2-a3e9306d9167.webp)

Languages other than mermaid render the same way, here a dbml fence turned into a database schema.

* Diagrams are rendered server-side by Kroki as static SVG, not by mermaid.js in the browser, so mermaid syntax newer than Kroki's pinned version can fail; mermaid C4 is silently rewritten to PlantUML C4.
* On a published Capable Site markdown is re-rendered by a different engine, so the static page can differ visibly from the Confluence page, and diagram fences become code blocks.

---

## Related

[Markdown library pageAnother part of how this works.](https://help.gocapable.com/markdown/markdown-library-page.html)

[Catalogue sectionsAnother part of how this works.](https://help.gocapable.com/markdown/catalogue-sections.html)

[How it worksThe rest.](https://help.gocapable.com/markdown/how-it-works.html)

---

_How it actually behaves._