Zum Hauptinhalt springen

Diagram Creation

Create D2 diagrams for TOGETHER/CCA documentation using brand colors and templates.

Quick Start​

  1. Import colors:

    ...@../../../assets/colors/_colors.d2

  2. Use system colors:

    • ${together} - Orange (#FF9900) fuer TOGETHER-Systeme
    • ${cca} - Blau (#0066B2) fuer CCA-Systeme
    • ${vu} - Gruen (#69BA7A) fuer VU-Systeme
    • ${kundensystem} - Lila (#867FBB) fuer Kundensysteme
    • ${neutral} - Grau (#999999) fuer generische Komponenten

  3. Use templates:

    • Architecture: ../brand-guide/diagrams/templates/architecture-template.d2
    • Sequence: ../brand-guide/diagrams/templates/sequence-template.d2
    • Flowchart: ../brand-guide/diagrams/templates/flowchart-template.d2
    • Network: ../brand-guide/diagrams/templates/network-template.d2

Style Guide​

Follow: Diagram Style Guide

Color Modes​

ModeImportUse case
Internal (default)_colors.d2Standard system diagrams
Analysis_colors-analysis.d2Data flow / classification
Context_colors-context.d2Domain boundary diagrams

Common Patterns​

Architecture Diagram​

...@../../../assets/colors/_colors.d2

direction: right

together: TOGETHER Platform {
  style.fill: ${together}
  api: API Gateway
  auth: Auth Service
}

vu: VU System {
  style.fill: ${vu}
}

customer: Kunde {
  icon: https://cdn.togethercca.com/docs/assets/icons/user.svg
}

customer -> together.api: HTTPS
together.api -> vu: REST

Sequence Diagram​

...@../../../assets/colors/_colors.d2

shape: sequence_diagram

user: User { style.fill: ${kundensystem} }
frontend: Frontend { style.fill: ${together} }
backend: Backend { style.fill: ${cca} }
db: Database { style.fill: ${neutral} }

user -> frontend: Login Request
frontend -> backend: POST /auth
backend -> db: Validate Credentials
db -> backend: User Found
backend -> frontend: JWT Token
frontend -> user: Redirect to Dashboard

Flowchart​

...@../../../assets/colors/_colors.d2

start: Start { shape: oval; style.fill: ${neutral} }
check: Valid Customer? { shape: diamond; style.fill: ${together} }
process: Process Order { shape: rectangle; style.fill: ${cca} }
error: Return Error { shape: rectangle; style.fill: "#E54040" }
end: End { shape: oval; style.fill: ${neutral} }

start -> check
check -> process: Yes
check -> error: No
process -> end
error -> end

Actor Icons​

user: Kunde {
  icon: https://cdn.togethercca.com/docs/assets/icons/user.svg
  style.fill: ${kundensystem}
}

Rendering​

Commit both source and rendered output:

d2 diagram-name.d2 diagram-name.svg

Best Practices​

  1. Always import colors - never hardcode hex values
  2. Use templates for consistent structure
  3. Label connections - describe what flows over them
  4. Icons: only HTTPS URLs, relative paths don't work

Resources​