Available Hierarchical Diagram Types in diagram-design

The diagram-design repository supports three distinct hierarchical diagram types—Tree diagrams, Org-chart diagrams, and Nested diagrams—each representing strict parent-child relationships.

The cathrynlavery/diagram-design repository provides specialized tools for rendering structural visualizations. Understanding the available hierarchical diagram types in diagram-design helps you select the appropriate format for representing organizational reporting lines, taxonomic classifications, or nested system modules.

Core Hierarchical Diagram Types

Tree Diagrams

Tree diagrams visualize classic parent-child hierarchies such as file systems, decision trees, or taxonomic classifications. The source repository includes docs/screenshots/tree.png as reference evidence, demonstrating linear branching where each node descends from exactly one parent.

Org-Chart Diagrams

Org-chart diagrams display organizational reporting structures and management hierarchies. The file docs/screenshots/org-chart.png illustrates this vertical arrangement, showing how reporting lines connect executives to managers and individual contributors in a strict hierarchy.

Nested Diagrams

Nested diagrams represent hierarchical containment through embedded boundaries, useful for depicting modules within systems or categories within classifications. The repository provides docs/screenshots/nested.png as a visual example of this containment-based structure.

Distinguishing Hierarchical from Non-Hierarchical Diagrams

Not all diagram types in the repository enforce parent-child relationships. The reference file skills/diagram-design/references/type-layers.md explicitly clarifies that layers represent flat or multi-dimensional layouts, stating that these "aren't actually hierarchical."

Generating Hierarchical Diagrams via CLI

The commands/export-diagram.md documentation defines the CLI workflow for rendering these visualizations. The system processes inputs through skills/diagram-design/assets/template-full.html as the core rendering engine for hierarchical layouts.

Generate a Tree diagram:

cat <<'EOF' > tree.mmd
flowchart TD
    A[Root] --> B[Child 1]
    A --> C[Child 2]
    B --> D[Grandchild]
EOF

diagram-design export-diagram --input tree.mmd --output tree.svg

Generate an Org-chart diagram:

cat <<'EOF' > org.mmd
graph TD
    CEO -->|Manages| CTO
    CEO -->|Manages| CFO
    CTO -->|Leads| DevTeam
EOF

diagram-design export-diagram --input org.mmd --output org.svg

Generate a Nested diagram:

cat <<'EOF' > nested.mmd
graph TD
    A[Outer Box] --> B[Inner Box 1]
    A --> C[Inner Box 2]
    B --> D[Deep Box]
EOF

diagram-design export-diagram --input nested.mmd --output nested.svg

Summary

• The repository defines three hierarchical diagram types: Tree, Org-chart, and Nested.
• Visual reference files reside in docs/screenshots/tree.png, org-chart.png, and nested.png.
• Only structures with strict parent-child relationships qualify as hierarchical; type-layers.md explicitly excludes layers from this category.
• Use the export-diagram command documented in commands/export-diagram.md to generate outputs using the template-full.html rendering engine.

Frequently Asked Questions

What hierarchical diagram types are available in diagram-design?

The repository provides Tree diagrams, Org-chart diagrams, and Nested diagrams. Each type represents distinct parent-child relationship patterns as demonstrated by the screenshot files in docs/screenshots/.

How do I render a Tree diagram using the command line?

Create a Mermaid flowchart definition file, then invoke diagram-design export-diagram --input tree.mmd --output tree.svg. The CLI processes the input through skills/diagram-design/assets/template-full.html to produce the final visualization.

Are Layer diagrams considered hierarchical in diagram-design?

No. According to skills/diagram-design/references/type-layers.md, layers represent non-hierarchical relationships. The document explicitly states that these "aren't actually hierarchical," distinguishing them from Tree, Org-chart, and Nested types.

What file handles the HTML rendering of hierarchical diagrams?

The system uses skills/diagram-design/assets/template-full.html as the core template engine. This file provides the HTML structure required to render Tree, Org-chart, and Nested diagram outputs correctly.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}