Diagram

Use docspress/diagram to turn a compact relationship list into a flow or sequence diagram. GitHub renders the Markdown preview as Mermaid, while WordPress renders a theme-native accessible SVG without loading a browser diagram library.

When to use it

Choose Diagram when the relationship among actors is harder to understand in prose. Use Flow for instructions readers perform and File Tree for hierarchy. For a large architecture, split the subject into several focused diagrams.

Write diagram source

Write one relationship per line:

Source -> Target: optional label

Lines beginning with # are comments. The parser considers the first 30 source lines and renders at most eight actors and 24 relationships. Extra relationships are discarded, so keep the model deliberately small.

DocsPress generates the Mermaid syntax; keep authoring the compact relationship format above. A flow diagram becomes a flowchart LR, and a sequence diagram becomes a sequenceDiagram.

Attributes

Reference

Diagram attributes

Labels and relationship source accepted by docspress/diagram.

4 fields

title string

Plain-text heading and accessible diagram label.

DefaultPublishing flow

type enum

Visual arrangement of actors and connections.

Defaultflow Valuesflow, sequence

source string required

One Source -> Target: label relationship per line.

DefaultStarter relationships ValuesFirst 30 lines, 8 actors, 24 relationships

caption string

Optional formatted explanation below the SVG.

The block supports wide alignment in addition to the shared design controls.

Creative examples

Documentation publishing sequence

Sequence

Documentation publishing flow

3 relationships

Reader feedback loop

Flow

From reader question to verified improvement

6 relationships

Cache-miss request sequence

Sequence

What happens on a documentation cache miss

6 relationships

Published behavior and accessibility

On GitHub, DocsPress projects the compact source into a fenced mermaid block so the repository view renders the diagram. In WordPress, DocsPress produces a theme-native SVG with an image role and accessible label. Labels are escaped for each target syntax and remain in the authoritative config. No third-party diagram code runs on the WordPress page.

Use distinct actor names, short edge labels, and one direction of reading. Describe the important conclusion in nearby prose so the page does not depend on vision alone.