# Mermaid

> Erzeugt Mermaid-Diagramme im ruhigen, minimalistischen wissenschaftlichen Stil fuer die ZHAW-BSc-Thesis. Standardmaessig schwarz/grau auf weiss, optional ein einziger dezenter Farbakzent. Diesen Skill konsultieren bei jeder Anfrage nach einem Diagramm (Flussdiagramm, Sequenz, Zustand, ER, Gantt, Timeline, Quadrant, Sankey, Requirements, etc.) und bei Fragen zu Mermaid-Syntax oder -Styling. Trigger-Beispiele "zeichne einen Ablauf", "mach ein Flowchart", "Diagramm fuer den DSR-Zyklus", "Sequence Diagram fuer den Prozess", "Datenmodell als ER-Diagramm", "Mermaid Theme", "wie stelle ich das in Mermaid dar".

- Skill: `yanickfischer/mermaid` (Agent Skill, multi-file: 31 files)
- Install (CLI): `npx skillmds@latest add yanickfischer/mermaid`
- Raw SKILL.md: https://api.skillmd.com/api/skills/yanickfischer/mermaid/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: yanickfischer (https://skillmd.com/u/yanickfischer)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/yanickfischer/mermaid

---


# Mermaid-Diagramme fuer die ZHAW-BSc-Thesis

Erzeugt Mermaid-Code im wissenschaftlichen Minimalstil ruhig, lesbar,
druckfreundlich. Diagramme sollen den Text ergaenzen, nicht ueberlagern
kein Farbrauschen, keine Schatten, keine 3D-Effekte.

## Workflow

1. **Diagrammtyp bestimmen** — kuratierte Liste unten zuerst pruefen.
2. **Referenz lesen** — nur die Datei fuer den gewaehlten Typ aus
   `references/` laden (sind gross — nicht alle auf einmal).
3. **Inhalt strukturieren** — semantisch benannte Knoten, klare Labels,
   keine Fuellwoerter. Schweizer Hochdeutsch (siehe [[wiss-schreiben-bsc]]),
   d.h. `ss` statt scharfes-s, Schweizer Guillemets wenn benoetigt.
4. **Style-Preset anwenden** — Default ist `scientific-minimal` (s.u.).
   Farbakzent nur wenn der Inhalt es zwingend braucht (z.B. Hervorhebung
   eines DSR-Artefakts gegenueber Umgebung).
5. **Output** — Code in mermaid-Codefence, plus kurze Notiz, wohin die
   Datei gehoert (`latex/figures/mermaid/<name>.mmd`) und welche
   Bildunterschrift in LaTeX passt. Wenn der Output in die Thesis fliesst:
   Hinweis auf [[ki-deklaration-bsc]] geben.

## Style-Presets (verbindlich)

Beide Presets nutzen das `base`-Theme — nur dieses ist anpassbar.
Schrift wird auf eine neutrale Sans-Serif gestellt, damit Diagramme
auch in einem Times-New-Roman-Fliesstext nicht typografisch
durcheinanderwirken (Tufte-Konvention: Abbildungstext darf vom
Fliesstext abweichen, solange er in sich konsistent ist).

### Preset A — `scientific-minimal` (Default)

Reines Graustufenbild. Verwenden fuer fast alle Diagramme.

```yaml
---
config:
  theme: base
  themeVariables:
    fontFamily: 'Inter, Helvetica Neue, Arial, sans-serif'
    fontSize: '14px'
    background: '#FFFFFF'
    primaryColor: '#F4F4F5'
    primaryTextColor: '#18181B'
    primaryBorderColor: '#3F3F46'
    secondaryColor: '#FAFAFA'
    secondaryTextColor: '#18181B'
    secondaryBorderColor: '#71717A'
    tertiaryColor: '#FFFFFF'
    tertiaryTextColor: '#18181B'
    tertiaryBorderColor: '#A1A1AA'
    lineColor: '#52525B'
    textColor: '#18181B'
    mainBkg: '#F4F4F5'
    noteBkgColor: '#FAFAFA'
    noteTextColor: '#18181B'
    noteBorderColor: '#A1A1AA'
    clusterBkg: '#FAFAFA'
    clusterBorder: '#A1A1AA'
    edgeLabelBackground: '#FFFFFF'
---
```

### Preset B — `scientific-accent` (sparsam)

Wie A, ergaenzt um genau einen dezenten Blau-Akzent. Nur einsetzen, wenn
exakt eine semantische Kategorie hervorgehoben werden soll (z.B.
"DSR-Artefakt" vs. "Umweltvariablen", "Treatment" vs. "Kontrolle").
Maximal 1–2 Knoten pro Diagramm im Akzent — sonst entsteht Rauschen.

Akzentfarbe: `#1E40AF` (gedaempftes Indigo-Blau, gut druckbar in S/W
als mittleres Grau). Anwendung per `classDef`/`class`:

```
flowchart LR
    A[Eingang] --> B[Verarbeitung]
    B --> C[Ergebnis]
    classDef accent fill:#DBE3F2,stroke:#1E40AF,color:#0B1F4F,stroke-width:1.5px
    class B accent
```

## Stilregeln (immer)

- **Eine Aussage pro Diagramm.** Wenn zwei Aussagen drinstecken, sind es
  zwei Diagramme.
- **Layout-Richtung:** Flowcharts `LR` (Links→Rechts) bevorzugen — passt
  in den 12.4 cm breiten Textbereich der Thesis. Nur wenn Hierarchie
  dominant ist: `TD`.
- **Beschriftungen:** Vollstaendige Substantive, keine Verbalsaetze
  ("Datenbereinigung" statt "Daten werden bereinigt"). Knoten kurz
  halten (max. vier Woerter), Details in den Fliesstext.
- **Kanten-Labels** nur wenn sie Information tragen (Bedingung, Zahl,
  Verb). Pfeil-Stil: einfache durchgezogene Linie. Gestrichelt
  (`-.->`) nur fuer "optional/asynchron".
- **Keine Emojis, keine Icons** (`fa:fa-*`), keine Hintergrundbilder.
- **Schriftgroessen nicht pro Knoten variieren** — nur ueber `themeVariables`.
- **Keine Subgraph-Verschachtelung tiefer als zwei Ebenen.**
- **Sprache:** Deutsch, Schweizer Hochdeutsch. Englische Fachbegriffe
  unveraendert, wenn etabliert (z.B. *Design Science Research*).

## Diagrammtypen — kuratiert fuer die BSc-Thesis

Diese Auswahl ist fuer eine wirtschaftsinformatische DSR-Arbeit
sinnvoll. Andere Typen koennen auf Wunsch verwendet werden, aber zuerst
hinterfragen, ob sie zur Aussage passen.

| Typ | Wann | Referenz |
| --- | --- | --- |
| Flowchart | Prozesse, Entscheidungsbaeume, DSR-Zyklus | [flowchart.md](references/flowchart.md) |
| Sequence | Interaktionen, API-Calls, Akteurs-Reihenfolge | [sequenceDiagram.md](references/sequenceDiagram.md) |
| State | Zustaende eines Artefakts/Systems | [stateDiagram.md](references/stateDiagram.md) |
| ER | Datenmodell, konzeptionelles Schema | [entityRelationshipDiagram.md](references/entityRelationshipDiagram.md) |
| Gantt | Zeitplan/Meilensteine | [gantt.md](references/gantt.md) |
| Timeline | Forschungs-/Projekthistorie | [timeline.md](references/timeline.md) |
| Quadrant | Positionierung (2x2-Analyse) | [quadrantChart.md](references/quadrantChart.md) |
| Requirement | Anforderungs-Traceability (DSR) | [requirementDiagram.md](references/requirementDiagram.md) |
| Sankey | Fluesse, Konversion | [sankey.md](references/sankey.md) |
| XY-Chart | Linien-/Balkendiagramme aus Code | [xyChart.md](references/xyChart.md) |

Weitere Typen (Class, C4, Git, Mindmap, Pie, Kanban, Architecture,
Block, Packet, Radar, Treemap, User Journey, ZenUML) sind unter
[references/](references/) verfuegbar — fuer diese Thesis selten
relevant. Pie-Charts grundsaetzlich vermeiden; ein Balkendiagramm
ist lesbarer.

## Konfiguration im Detail

- [Theming](references/config-theming.md) — vollstaendige
  `themeVariables`-Liste
- [Directives](references/config-directives.md) — Diagramm-spezifische
  Konfiguration
- [Layouts](references/config-layouts.md) — Layout-Algorithmen
- [Configuration](references/config-configuration.md) — globale Settings
- [Tidy Tree](references/config-tidy-tree.md) — Tidy-Tree-Layout
- [Math](references/config-math.md) — LaTeX-Mathe-Support

## Output-Konvention

1. Code als mermaid-Codefence ausgeben.
2. Frontmatter mit Preset A einbinden (oder B, falls Akzent noetig).
3. Knoten in semantischen IDs (`benutzer`, `datenbank`, `dsrZyklus1`)
   benennen, nicht `A`/`B`/`C`. Labels in den eckigen Klammern bleiben
   menschen-lesbar.
4. Nach dem Code-Block: eine Zeile mit Vorschlag fuer Dateinamen
   (`latex/figures/mermaid/dsr-prozess.mmd`) und eine Zeile mit
   LaTeX-Caption-Vorschlag.
5. Wenn das Diagramm in die Thesis kommt: kurzer Hinweis zur
   KI-Deklaration ([[ki-deklaration-bsc]]), da Mermaid-Code
   KI-generiert ist und das fertige Bild somit eine KI-erstellte
   Visualisierung ist.

## Beispiel-Output — DSR-Zyklus (Hevner)

```
---
config:
  theme: base
  themeVariables:
    fontFamily: 'Inter, Helvetica Neue, Arial, sans-serif'
    fontSize: '14px'
    background: '#FFFFFF'
    primaryColor: '#F4F4F5'
    primaryTextColor: '#18181B'
    primaryBorderColor: '#3F3F46'
    lineColor: '#52525B'
    clusterBkg: '#FAFAFA'
    clusterBorder: '#A1A1AA'
---
flowchart LR
    umfeld[Umfeld<br/>Menschen, Organisation, Technologie]
    wissen[Wissensbasis<br/>Theorien, Methoden, Modelle]
    subgraph forschung[Design Science Research]
        direction TB
        bauen[Artefakt entwickeln] --> evaluieren[Artefakt evaluieren]
        evaluieren -.-> bauen
    end
    umfeld -- Anforderungen --> forschung
    forschung -- Anwendung --> umfeld
    wissen -- Grundlagen --> forschung
    forschung -- Beitrag --> wissen
```

Dateiname: `latex/figures/mermaid/dsr-zyklus.mmd`
Caption-Vorschlag: «Design-Science-Research-Zyklus nach Hevner (2007).»

---

Anforderung der Nutzerin/des Nutzers: $ARGUMENTS