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
- Diagrammtyp bestimmen — kuratierte Liste unten zuerst pruefen.
- Referenz lesen — nur die Datei fuer den gewaehlten Typ aus
references/ laden (sind gross — nicht alle auf einmal).
- 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.
- 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).
- 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.
---
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 |
| Sequence |
Interaktionen, API-Calls, Akteurs-Reihenfolge |
sequenceDiagram.md |
| State |
Zustaende eines Artefakts/Systems |
stateDiagram.md |
| ER |
Datenmodell, konzeptionelles Schema |
entityRelationshipDiagram.md |
| Gantt |
Zeitplan/Meilensteine |
gantt.md |
| Timeline |
Forschungs-/Projekthistorie |
timeline.md |
| Quadrant |
Positionierung (2x2-Analyse) |
quadrantChart.md |
| Requirement |
Anforderungs-Traceability (DSR) |
requirementDiagram.md |
| Sankey |
Fluesse, Konversion |
sankey.md |
| XY-Chart |
Linien-/Balkendiagramme aus Code |
xyChart.md |
Weitere Typen (Class, C4, Git, Mindmap, Pie, Kanban, Architecture,
Block, Packet, Radar, Treemap, User Journey, ZenUML) sind unter
references/ verfuegbar — fuer diese Thesis selten
relevant. Pie-Charts grundsaetzlich vermeiden; ein Balkendiagramm
ist lesbarer.
Konfiguration im Detail
- Theming — vollstaendige
themeVariables-Liste
- Directives — Diagramm-spezifische
Konfiguration
- Layouts — Layout-Algorithmen
- Configuration — globale Settings
- Tidy Tree — Tidy-Tree-Layout
- Math — LaTeX-Mathe-Support
Output-Konvention
- Code als mermaid-Codefence ausgeben.
- Frontmatter mit Preset A einbinden (oder B, falls Akzent noetig).
- Knoten in semantischen IDs (
benutzer, datenbank, dsrZyklus1)
benennen, nicht A/B/C. Labels in den eckigen Klammern bleiben
menschen-lesbar.
- Nach dem Code-Block: eine Zeile mit Vorschlag fuer Dateinamen
(
latex/figures/mermaid/dsr-prozess.mmd) und eine Zeile mit
LaTeX-Caption-Vorschlag.
- 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
1---2name: mermaid3description: 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".4---56# Mermaid-Diagramme fuer die ZHAW-BSc-Thesis78Erzeugt Mermaid-Code im wissenschaftlichen Minimalstil ruhig, lesbar,9druckfreundlich. Diagramme sollen den Text ergaenzen, nicht ueberlagern10kein Farbrauschen, keine Schatten, keine 3D-Effekte.1112## Workflow13141. **Diagrammtyp bestimmen** — kuratierte Liste unten zuerst pruefen.152. **Referenz lesen** — nur die Datei fuer den gewaehlten Typ aus16 `references/` laden (sind gross — nicht alle auf einmal).173. **Inhalt strukturieren** — semantisch benannte Knoten, klare Labels,18 keine Fuellwoerter. Schweizer Hochdeutsch (siehe [[wiss-schreiben-bsc]]),19 d.h. `ss` statt scharfes-s, Schweizer Guillemets wenn benoetigt.204. **Style-Preset anwenden** — Default ist `scientific-minimal` (s.u.).21 Farbakzent nur wenn der Inhalt es zwingend braucht (z.B. Hervorhebung22 eines DSR-Artefakts gegenueber Umgebung).235. **Output** — Code in mermaid-Codefence, plus kurze Notiz, wohin die24 Datei gehoert (`latex/figures/mermaid/<name>.mmd`) und welche25 Bildunterschrift in LaTeX passt. Wenn der Output in die Thesis fliesst:26 Hinweis auf [[ki-deklaration-bsc]] geben.2728## Style-Presets (verbindlich)2930Beide Presets nutzen das `base`-Theme — nur dieses ist anpassbar.31Schrift wird auf eine neutrale Sans-Serif gestellt, damit Diagramme32auch in einem Times-New-Roman-Fliesstext nicht typografisch33durcheinanderwirken (Tufte-Konvention: Abbildungstext darf vom34Fliesstext abweichen, solange er in sich konsistent ist).3536### Preset A — `scientific-minimal` (Default)3738Reines Graustufenbild. Verwenden fuer fast alle Diagramme.3940```yaml41---42config:43 theme: base44 themeVariables:45 fontFamily: 'Inter, Helvetica Neue, Arial, sans-serif'46 fontSize: '14px'47 background: '#FFFFFF'48 primaryColor: '#F4F4F5'49 primaryTextColor: '#18181B'50 primaryBorderColor: '#3F3F46'51 secondaryColor: '#FAFAFA'52 secondaryTextColor: '#18181B'53 secondaryBorderColor: '#71717A'54 tertiaryColor: '#FFFFFF'55 tertiaryTextColor: '#18181B'56 tertiaryBorderColor: '#A1A1AA'57 lineColor: '#52525B'58 textColor: '#18181B'59 mainBkg: '#F4F4F5'60 noteBkgColor: '#FAFAFA'61 noteTextColor: '#18181B'62 noteBorderColor: '#A1A1AA'63 clusterBkg: '#FAFAFA'64 clusterBorder: '#A1A1AA'65 edgeLabelBackground: '#FFFFFF'66---67```6869### Preset B — `scientific-accent` (sparsam)7071Wie A, ergaenzt um genau einen dezenten Blau-Akzent. Nur einsetzen, wenn72exakt eine semantische Kategorie hervorgehoben werden soll (z.B.73"DSR-Artefakt" vs. "Umweltvariablen", "Treatment" vs. "Kontrolle").74Maximal 1–2 Knoten pro Diagramm im Akzent — sonst entsteht Rauschen.7576Akzentfarbe: `#1E40AF` (gedaempftes Indigo-Blau, gut druckbar in S/W77als mittleres Grau). Anwendung per `classDef`/`class`:7879```80flowchart LR81 A[Eingang] --> B[Verarbeitung]82 B --> C[Ergebnis]83 classDef accent fill:#DBE3F2,stroke:#1E40AF,color:#0B1F4F,stroke-width:1.5px84 class B accent85```8687## Stilregeln (immer)8889- **Eine Aussage pro Diagramm.** Wenn zwei Aussagen drinstecken, sind es90 zwei Diagramme.91- **Layout-Richtung:** Flowcharts `LR` (Links→Rechts) bevorzugen — passt92 in den 12.4 cm breiten Textbereich der Thesis. Nur wenn Hierarchie93 dominant ist: `TD`.94- **Beschriftungen:** Vollstaendige Substantive, keine Verbalsaetze95 ("Datenbereinigung" statt "Daten werden bereinigt"). Knoten kurz96 halten (max. vier Woerter), Details in den Fliesstext.97- **Kanten-Labels** nur wenn sie Information tragen (Bedingung, Zahl,98 Verb). Pfeil-Stil: einfache durchgezogene Linie. Gestrichelt99 (`-.->`) nur fuer "optional/asynchron".100- **Keine Emojis, keine Icons** (`fa:fa-*`), keine Hintergrundbilder.101- **Schriftgroessen nicht pro Knoten variieren** — nur ueber `themeVariables`.102- **Keine Subgraph-Verschachtelung tiefer als zwei Ebenen.**103- **Sprache:** Deutsch, Schweizer Hochdeutsch. Englische Fachbegriffe104 unveraendert, wenn etabliert (z.B. *Design Science Research*).105106## Diagrammtypen — kuratiert fuer die BSc-Thesis107108Diese Auswahl ist fuer eine wirtschaftsinformatische DSR-Arbeit109sinnvoll. Andere Typen koennen auf Wunsch verwendet werden, aber zuerst110hinterfragen, ob sie zur Aussage passen.111112| Typ | Wann | Referenz |113| --- | --- | --- |114| Flowchart | Prozesse, Entscheidungsbaeume, DSR-Zyklus | [flowchart.md](references/flowchart.md) |115| Sequence | Interaktionen, API-Calls, Akteurs-Reihenfolge | [sequenceDiagram.md](references/sequenceDiagram.md) |116| State | Zustaende eines Artefakts/Systems | [stateDiagram.md](references/stateDiagram.md) |117| ER | Datenmodell, konzeptionelles Schema | [entityRelationshipDiagram.md](references/entityRelationshipDiagram.md) |118| Gantt | Zeitplan/Meilensteine | [gantt.md](references/gantt.md) |119| Timeline | Forschungs-/Projekthistorie | [timeline.md](references/timeline.md) |120| Quadrant | Positionierung (2x2-Analyse) | [quadrantChart.md](references/quadrantChart.md) |121| Requirement | Anforderungs-Traceability (DSR) | [requirementDiagram.md](references/requirementDiagram.md) |122| Sankey | Fluesse, Konversion | [sankey.md](references/sankey.md) |123| XY-Chart | Linien-/Balkendiagramme aus Code | [xyChart.md](references/xyChart.md) |124125Weitere Typen (Class, C4, Git, Mindmap, Pie, Kanban, Architecture,126Block, Packet, Radar, Treemap, User Journey, ZenUML) sind unter127[references/](references/) verfuegbar — fuer diese Thesis selten128relevant. Pie-Charts grundsaetzlich vermeiden; ein Balkendiagramm129ist lesbarer.130131## Konfiguration im Detail132133- [Theming](references/config-theming.md) — vollstaendige134 `themeVariables`-Liste135- [Directives](references/config-directives.md) — Diagramm-spezifische136 Konfiguration137- [Layouts](references/config-layouts.md) — Layout-Algorithmen138- [Configuration](references/config-configuration.md) — globale Settings139- [Tidy Tree](references/config-tidy-tree.md) — Tidy-Tree-Layout140- [Math](references/config-math.md) — LaTeX-Mathe-Support141142## Output-Konvention1431441. Code als mermaid-Codefence ausgeben.1452. Frontmatter mit Preset A einbinden (oder B, falls Akzent noetig).1463. Knoten in semantischen IDs (`benutzer`, `datenbank`, `dsrZyklus1`)147 benennen, nicht `A`/`B`/`C`. Labels in den eckigen Klammern bleiben148 menschen-lesbar.1494. Nach dem Code-Block: eine Zeile mit Vorschlag fuer Dateinamen150 (`latex/figures/mermaid/dsr-prozess.mmd`) und eine Zeile mit151 LaTeX-Caption-Vorschlag.1525. Wenn das Diagramm in die Thesis kommt: kurzer Hinweis zur153 KI-Deklaration ([[ki-deklaration-bsc]]), da Mermaid-Code154 KI-generiert ist und das fertige Bild somit eine KI-erstellte155 Visualisierung ist.156157## Beispiel-Output — DSR-Zyklus (Hevner)158159```160---161config:162 theme: base163 themeVariables:164 fontFamily: 'Inter, Helvetica Neue, Arial, sans-serif'165 fontSize: '14px'166 background: '#FFFFFF'167 primaryColor: '#F4F4F5'168 primaryTextColor: '#18181B'169 primaryBorderColor: '#3F3F46'170 lineColor: '#52525B'171 clusterBkg: '#FAFAFA'172 clusterBorder: '#A1A1AA'173---174flowchart LR175 umfeld[Umfeld<br/>Menschen, Organisation, Technologie]176 wissen[Wissensbasis<br/>Theorien, Methoden, Modelle]177 subgraph forschung[Design Science Research]178 direction TB179 bauen[Artefakt entwickeln] --> evaluieren[Artefakt evaluieren]180 evaluieren -.-> bauen181 end182 umfeld -- Anforderungen --> forschung183 forschung -- Anwendung --> umfeld184 wissen -- Grundlagen --> forschung185 forschung -- Beitrag --> wissen186```187188Dateiname: `latex/figures/mermaid/dsr-zyklus.mmd`189Caption-Vorschlag: «Design-Science-Research-Zyklus nach Hevner (2007).»190191---192193Anforderung der Nutzerin/des Nutzers: $ARGUMENTS