Diagrams in docs

Docs can carry diagrams in three forms: Mermaid and nwdiag, which are code blocks that render as live diagrams, and Excalidraw, a freehand whiteboard block. All three keep their source in the document, so anyone who spots a wrong diagram can fix it in place.

Mermaid

Mermaid covers flowcharts, sequence diagrams, and the rest of the Mermaid syntax. It renders right in the editor, and invalid syntax shows an inline error explaining what's wrong.

• Insert a Code block and set its language to Mermaid.

• An empty block shows a hint ("Add Mermaid source to render a diagram") until you write source.

nwdiag

nwdiag draws network topology diagrams — networks, hosts, and addresses. It is rendered by Helpin's built-in renderer and adapts to light and dark theme.

• Insert a Code block and set its language to nwdiag.

Excalidraw

• Insert with slash menu → Excalidraw.

• A full whiteboard canvas opens inside the document: shapes, arrows, freehand drawing, text, and frames.

• The drawing is saved with the document and re-opens editable, so teammates can update the diagram without leaving the doc.

• A good fit for architecture sketches, flowcharts, wireframes in specs, and diagrams that do not fit a code syntax.

• On the public help center, Excalidraw drawings appear as a rendered image.

Which diagram for which job

Need	Use
Flowchart, sequence diagram, or anything expressible in Mermaid syntax	Mermaid code block
Network topology (networks, hosts, addresses)	nwdiag code block
Freehand sketch, wireframe, or whiteboard-style architecture drawing	Excalidraw

Working with a diagram block

• Pick Mermaid or nwdiag as a code block's language and the block renders the source as a diagram instead of syntax-highlighted code.

• A Diagram / Source toggle on the block flips between the rendered diagram and its source; the copy button and the language menu keep working in both modes.

• These are code blocks, not separate block types — there is no /mermaid slash command. Insert a Code block and switch its language.

What renders where

Block	In-app	Public help center
Mermaid	✅ (rendered diagram)	✅ (rendered diagram)
nwdiag	✅ (rendered diagram)	✅ (rendered diagram)
Excalidraw	✅ (editable)	✅ (rendered image)

Both Mermaid and nwdiag diagrams render on the public help center. Entity and saved-view embeds are stripped from public rendering instead, so internal data stays internal — see Video & rich embeds.