Diagrams in fenced code blocks

Updated
View as text
Open in Confluence
Open in ChatGPT Open in Claude

A fenced code block written in one of 28 supported diagram languages is rendered as an SVG image by Capable's hosted diagram service. Supported: actdiag, blockdiag, bpmn, bytefield, c4plantuml, d2, dbml, ditaa, erd, excalidraw, graphviz, mermaid, nomnoml, nwdiag, packetdiag, pikchr, plantuml, rackdiag, seqdiag, structurizr, svgbob, symbolator, tikz, umlet, vega, vegalite, wavedrom and wireviz. Mermaid C4 diagrams are converted to c4plantuml automatically.

#Worth knowing

Requires a signed-in session; without one the block stays as plain code with no error. The diagram source is sent to Capable's service so it can be drawn.

#Where to find it

Anywhere in a Markdown document

#Where you do it

Task

Where

Add a diagram

Editor > Insert > From code, or write a fenced block yourself

#A few things that catch people out

  • The language after the opening backticks must be one of the names above, for example graphviz. Any other language stays as a code block.

  • Insert > From code always starts a Mermaid diagram. Change the language to use another one.

  • There is no diagram button on the toolbar; use the Insert menu or type the block.

How it actually behaves.