For AI agents: the complete documentation index is available at /llms.txt, the full documentation bundle is available at /llms-full.txt, and this page is available as Markdown at /packs/shared/documentation/diagrams.md.
Quick start

Diagrams

Choose a visual model only when it explains a relationship more clearly than the surrounding text.

Diagram choice and appearance

Why

A content-source diagram and a directory tree answer different questions. Consistent colors and a small scope keep either view legible in a copied reference pack.

SubjectFormTarget limit
Architecture or routingFlowchartAbout 10–15 nodes
Ordered interactionSequenceAt most 7 participants and about 15–20 messages
Data relationshipsERAbout 8–10 entities with their relevant attributes
Files and directoriesFenced text treeThe subtree needed for the explanation

Rules

  • MUST select the diagram form according to the relationship being explained. [review]
  • MUST apply the Catppuccin Mocha palette to Mermaid output. [review]
  • MUST style semantic classes such as source, core, and storage, rather than default classes or per-node overrides. [review]
  • MUST shorten labels and split views that exceed the table's target sizes. [review]
  • MUST explain the distinction when solid and dashed connections share a diagram. [review]
  • MUST omit activation boxes and mirrored actors from sequence diagrams. [review]
  • MUST use verbs to describe ER relationships. [review]
  • MAY show a directory layout as a fenced text tree. [review]

Example

Diagram

[review]

Markdown formatting and installed-link tests cover their configured contracts. Rendered inspection and review establish diagram readability, palette, and semantic classes.

Enforcement

Markdown formatting and installed-link tests cover their configured contracts. Rendered inspection and review establish diagram readability, palette, and semantic classes.