Connection Diagram Types in Diagram-Design: A Complete Guide

Diagram-Design supports 15 connection-oriented diagram types ranging from Architecture and Flowchart to Data Flow and Sequence, all rendered with strict orthogonal routing rules to ensure visual consistency.

The cathrynlavery/diagram-design repository provides a specialized toolkit for creating technical diagrams where explicit connections between nodes convey system relationships, data flows, and hierarchical structures. These connection diagram types are defined in the master reference file skills/diagram-design/SKILL.md and share a unified rendering engine that enforces orthogonal connector routing across all visualizations.

Available Connection Diagram Types in Diagram-Design

The repository distinguishes between connection-oriented diagrams (which render explicit arrows, lines, or paths linking elements) and data-only visualizations. According to skills/diagram-design/SKILL.md, the following 15 types support connection rendering:

• Architecture: System overviews, data-flow diagrams, and integration maps built from components and connections.
• IT Current-State: Legacy landscape visualization grouped by phase or department, with connections showing data hand-offs between tools.
• Flowchart: Decision logic and branching workflows where arrows encode flow between steps.
• Sequence: Time-ordered message flows between actors, with each message represented as a directed connection.
• State Machine: Finite-state diagrams where transitions between states are rendered as arrows.
• ER / Data Model: Entity-relationship visualizations with explicit connector lines between entities.
• Swimlane: Cross-functional processes where steps within each lane are linked by connecting arrows.
• Loop: Cyclical processes featuring feedback connections from final steps back to initial steps.
• Tree: Hierarchical structures displaying parent-child relationships through explicit edges.
• Org Chart: Organizational hierarchies with lines linking managers to direct reports.
• Layers: Stacked abstraction diagrams where layers connect to adjacent levels via vertical or horizontal links.
• High-Level: End-to-end data-stack overviews using chevrons and connections between sources, components, and targets.
• Process: Multi-actor sequential processes with explicit data hand-offs rendered as directional arrows.
• Data Flow: Pipeline stage visualizations showing who performs what actions, with hand-offs represented as connections.
• DP Integration: Data platform integration topology linking sources, core systems, and consumers via edges.

Types such as Bar, Line, Radar, Scatter, Quadrant, Venn, Pyramid, Gantt, and DP Security Matrix are excluded from this list as they represent data-only visualizations without explicit connector semantics.

How Connections Are Rendered in Diagram-Design

For every connection diagram type, Diagram-Design enforces a strict orthogonal routing model defined in skills/diagram-design/references/type-architecture.md to maintain visual consistency.

Rounded Right-Angle Connectors
All non-horizontal or non-vertical edges must use rounded right-angle connectors rather than direct diagonal lines (see line 14 of type-architecture.md).

Port Selection Logic
The rendering engine automatically selects connection ports based on flow direction:

• Top/Bottom ports for vertical flows
• Left/Right ports for horizontal flows
  (See lines 24-32 of type-architecture.md)

Semantic Line Styling

• Solid lines represent synchronous or required connections
• Dashed paths convey optional or asynchronous semantics while preserving the same orthogonal routing rules (lines 34-35)

Crossing Logic
When two orthogonal connectors intersect, the system applies bridge/hop logic, adding a small arc on the less-important arrow to maintain visual clarity (lines 38-50).

Generating Connection Diagrams with Diagram-Design

Connection diagrams are generated using the /export-diagram command template located at commands/export-diagram.md. This wrapper processes HTML template files containing node and connection definitions.

# Generate an architecture diagram with components and connections

export-diagram examples/architecture.html --size=doc-wide

# Create a sequence diagram with message connections

export-diagram examples/sequence.html --svg-only

# Export a data-flow diagram as high-resolution PNG

export-diagram examples/data-flow.html --png-only --scale=2

HTML Template Structure

Connection diagrams require specific HTML attributes to define nodes and edges. The following snippet from assets/example-architecture.html illustrates the markup structure:

<!-- example-architecture.html -->
<div class="diagram">
  <g data-node id="frontend" ...></g>
  <g data-node id="backend" ...></g>
  <g data-connection source="frontend" target="backend" ...></g>
</div>

When processed by the export-diagram command, this markup generates an SVG that adheres to the orthogonal routing standards defined in the architecture reference file.

Summary

• Diagram-Design provides 15 distinct connection diagram types including Architecture, Flowchart, Sequence, State Machine, and Data Flow.
• All connection types share a unified orthogonal routing system with rounded right-angle connectors and automatic port selection.
• Connection semantics are encoded through line styling (solid vs. dashed) and bridge logic at intersection points.
• Diagrams are generated via the export-diagram command referencing HTML templates with data-node and data-connection attributes.
• Type definitions reside in skills/diagram-design/SKILL.md while rendering rules are specified in skills/diagram-design/references/type-architecture.md.

Frequently Asked Questions

What is the difference between connection diagram types and data-only types in Diagram-Design?

Connection diagram types render explicit visual links (arrows, lines, or paths) between nodes, containers, or zones to show relationships, flows, or hierarchies. Data-only types such as Bar, Line, Radar, and Scatter charts visualize numerical datasets without drawing connectors between discrete elements. The distinction is documented in skills/diagram-design/SKILL.md where connection types include Architecture, Flowchart, and ER diagrams, while statistical charts are listed separately without connection semantics.

How does Diagram-Design handle line crossings in complex connection diagrams?

According to skills/diagram-design/references/type-architecture.md (lines 38-50), the system implements bridge/hop logic for orthogonal connector intersections. When two connectors cross, the less-important arrow displays a small arc or "hop" over the primary connection line. This preserves the visual traceability of both paths while maintaining the strict orthogonal routing rules that apply to all connection diagram types.

Can I customize the connector routing rules for specific diagram types?

No, the orthogonal routing rules are strictly enforced across all connection diagram types to ensure consistency. The type-architecture.md reference file mandates rounded right-angle connectors, specific port selection based on flow direction (top/bottom for vertical, left/right for horizontal), and standardized crossing behavior. While you can control line style (solid vs. dashed for optional flows) and connection endpoints via the data-connection attributes in your HTML templates, the underlying routing algorithm remains consistent.

Which file contains the complete list of available connection diagram types?

The master reference file skills/diagram-design/SKILL.md contains the authoritative list of all diagram types, with connection-oriented types explicitly identified through their "Best for" descriptions. This file documents each type from Architecture (line 85) through DP Integration (line 110), distinguishing connection-based visualizations from data-only charts like Quadrant or Venn diagrams.

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