Mermaid-Designlabor · Gazette Technical
Stand: 03.11.2026. Zweck: Drei isolierte Gestaltungsvarianten für spätere OmniMail-Gazette-Diagramme vergleichen. Diese Laborseite ist keine V3 und verändert weder die V1 noch den V2-Entwurf.
Das BorgBackup-Schema ist ein synthetisches Gestaltungsbeispiel. Insbesondere die gezeichnete Alarm- und Mailkette ist kein Nachweis, dass eine solche Remembrall-Alarmierung produktiv implementiert wurde. Die Verbindungen und Beschriftungen sind in A, B und C identisch; nur die Gestaltung unterscheidet sich.
Technischer Laborstand: DokuWiki 2026-07-14c „Mort“, Mermaid-Plugin vom 31.07.2026. Das Plugin lädt aktuell Mermaid über einen nicht versionierten CDN-Pfad; der CDN-Readback vom 03.11.2026 lieferte 12.2.0. Ein späterer CDN-Wechsel kann die Darstellung ändern. Die Diagramme enthalten keine globale Wiki-Konfiguration.
Variante A · Portable Mermaid-Klassen
Knoten und Prüfung verwenden Mermaid-classDef; die Pfeile werden mit linkStyle gestaltet. Die runden Knoten beruhen auf Mermaid-Formsyntax. Diese Variante benötigt keine Theme-Direktive und keine CSS-Datei.
BorgBackup-Stilprobe
variante-a-borg.mmd
flowchart TD
B("BorgBackup · stündlich")
P{"Backup-Ergebnis"}
G("PASS · grünes Betriebsprotokoll")
W("WARN · Sicherung eingeschränkt")
R("RED · Sicherung fehlgeschlagen")
O("OmniMail™ · lokale Übergabe")
M("Sorgenkasten · hwehrs@vetikke.de")
B --> P
P -->|"Erfolgreich"| G
P -->|"Warnung"| W
P -->|"Fehler"| R
W --> O
R --> O
O --> M
classDef station fill:#f2f3f3,stroke:#cbd2d6,stroke-width:1px,color:#30383e,font-family:Arial,font-size:16px
classDef decision fill:#f8f9f9,stroke:#aeb8bd,stroke-width:1.2px,stroke-dasharray:4 3,color:#30383e,font-family:Arial,font-size:16px
linkStyle default stroke:#88939a,stroke-width:1.2px
class P decision
class B,G,W,R,O,M station
Technischer OmniMail-Ausschnitt
variante-a-technik.mmd · SMTP-Eingang, Policy-Anfrage, RCPT-Kontenauskunft und Rückantworten gemäß V2-Referenz.
flowchart LR
X("SMTP-Eingang")
Q("Alois · ext-qipu")
H{"Empfängerprüfung · Hildegard"}
S("Stalwart · Kontenauskunft")
X -->|"TCP 25"| Q
Q -->|"Policy 10031"| H
H -->|"SMTP RCPT · TCP 25"| S
S -->|"RCPT-Ergebnis"| H
H -->|"SMTP-Entscheidung"| Q
classDef station fill:#f2f3f3,stroke:#cbd2d6,stroke-width:1px,color:#30383e,font-family:Arial,font-size:16px
classDef decision fill:#f8f9f9,stroke:#aeb8bd,stroke-width:1.2px,stroke-dasharray:4 3,color:#30383e,font-family:Arial,font-size:16px
linkStyle default stroke:#88939a,stroke-width:1.2px
class H decision
class X,Q,S station
Grenze: Mermaid-Klassen kontrollieren Farben und Linien zuverlässig; Innenabstände und exakte Eckradien bleiben vom Renderer abhängig.
Variante B · Diagrammlokales Theme
Mermaid-Frontmatter setzt theme: base und ausgewählte themeVariables nur für das jeweilige Diagramm. Das Plugin erhält die Frontmatter über seinen dokumentierten raw-Modus. Die gestrichelte Prüfung nutzt ergänzend eine lokale classDef-Regel.
BorgBackup-Stilprobe
variante-b-borg.mmd
---
config:
theme: base
themeVariables:
background: "#ffffff"
primaryColor: "#f2f3f3"
primaryTextColor: "#30383e"
primaryBorderColor: "#cbd2d6"
lineColor: "#88939a"
edgeLabelBackground: "#ffffff"
fontFamily: "Arial"
fontSize: "16px"
flowchart:
nodeSpacing: 42
rankSpacing: 54
padding: 18
---
flowchart TD
B("BorgBackup · stündlich")
P{"Backup-Ergebnis"}
G("PASS · grünes Betriebsprotokoll")
W("WARN · Sicherung eingeschränkt")
R("RED · Sicherung fehlgeschlagen")
O("OmniMail™ · lokale Übergabe")
M("Sorgenkasten · hwehrs@vetikke.de")
B --> P
P -->|"Erfolgreich"| G
P -->|"Warnung"| W
P -->|"Fehler"| R
W --> O
R --> O
O --> M
classDef decision stroke:#aeb8bd,stroke-width:1.2px,stroke-dasharray:4 3
class P decision
Technischer OmniMail-Ausschnitt
variante-b-technik.mmd · gleiche Knoten, Beschriftungen und Kanten wie A.
---
config:
theme: base
themeVariables:
background: "#ffffff"
primaryColor: "#f2f3f3"
primaryTextColor: "#30383e"
primaryBorderColor: "#cbd2d6"
lineColor: "#88939a"
edgeLabelBackground: "#ffffff"
fontFamily: "Arial"
fontSize: "16px"
flowchart:
nodeSpacing: 42
rankSpacing: 54
padding: 18
---
flowchart LR
X("SMTP-Eingang")
Q("Alois · ext-qipu")
H{"Empfängerprüfung · Hildegard"}
S("Stalwart · Kontenauskunft")
X -->|"TCP 25"| Q
Q -->|"Policy 10031"| H
H -->|"SMTP RCPT · TCP 25"| S
S -->|"RCPT-Ergebnis"| H
H -->|"SMTP-Entscheidung"| Q
classDef decision stroke:#aeb8bd,stroke-width:1.2px,stroke-dasharray:4 3
class H decision
Grenze: Das base-Theme erzeugt im hier verwendeten Renderer kräftigere Kanten und Rahmen als A. Frontmatter und Variablen hängen von der jeweils geladenen Mermaid-Version ab.
Variante C · Diagrammlokales CSS
Mermaid-Frontmatter enthält themeCSS für feine Radien, Knoten- und Pfeilstile. Die erzeugten SVG-Regeln tragen einen diagrammeigenen ID-Präfix. Es wurde keine globale CSS-Datei aktiviert und keine Plugin- oder Template-Datei verändert. Der separate Entwurf variante-c-css-entwurf.css dokumentiert die Regeln zur Nachprüfung.
BorgBackup-Stilprobe
variante-c-borg.mmd
---
config:
theme: base
themeVariables:
background: "#ffffff"
primaryColor: "#f2f3f3"
primaryTextColor: "#30383e"
primaryBorderColor: "#cbd2d6"
lineColor: "#88939a"
edgeLabelBackground: "#ffffff"
fontFamily: "Arial"
fontSize: "16px"
flowchart:
nodeSpacing: 42
rankSpacing: 54
padding: 18
themeCSS: |
.node rect, .node polygon {
fill: #f2f3f3 !important;
stroke: #cbd2d6 !important;
stroke-width: 1px !important;
}
.node rect {
rx: 18px;
ry: 18px;
}
.node.decision polygon {
stroke: #aeb8bd !important;
stroke-dasharray: 4 3;
}
.edgePath path, .flowchart-link {
stroke: #88939a !important;
stroke-width: 1.2px !important;
}
---
flowchart TD
B("BorgBackup · stündlich")
P{"Backup-Ergebnis"}
G("PASS · grünes Betriebsprotokoll")
W("WARN · Sicherung eingeschränkt")
R("RED · Sicherung fehlgeschlagen")
O("OmniMail™ · lokale Übergabe")
M("Sorgenkasten · hwehrs@vetikke.de")
B --> P
P -->|"Erfolgreich"| G
P -->|"Warnung"| W
P -->|"Fehler"| R
W --> O
R --> O
O --> M
class P decision
Technischer OmniMail-Ausschnitt
variante-c-technik.mmd · gleiche Knoten, Beschriftungen und Kanten wie A und B.
---
config:
theme: base
themeVariables:
background: "#ffffff"
primaryColor: "#f2f3f3"
primaryTextColor: "#30383e"
primaryBorderColor: "#cbd2d6"
lineColor: "#88939a"
edgeLabelBackground: "#ffffff"
fontFamily: "Arial"
fontSize: "16px"
flowchart:
nodeSpacing: 42
rankSpacing: 54
padding: 18
themeCSS: |
.node rect, .node polygon {
fill: #f2f3f3 !important;
stroke: #cbd2d6 !important;
stroke-width: 1px !important;
}
.node rect {
rx: 18px;
ry: 18px;
}
.node.decision polygon {
stroke: #aeb8bd !important;
stroke-dasharray: 4 3;
}
.edgePath path, .flowchart-link {
stroke: #88939a !important;
stroke-width: 1.2px !important;
}
---
flowchart LR
X("SMTP-Eingang")
Q("Alois · ext-qipu")
H{"Empfängerprüfung · Hildegard"}
S("Stalwart · Kontenauskunft")
X -->|"TCP 25"| Q
Q -->|"Policy 10031"| H
H -->|"SMTP RCPT · TCP 25"| S
S -->|"RCPT-Ergebnis"| H
H -->|"SMTP-Entscheidung"| Q
class H decision
Grenze: Die CSS-Regeln wirken nur innerhalb des erzeugten SVG. Mermaid kann seine SVG-Klassen und Sanitierungsregeln bei späteren Versionen ändern; C ist deshalb wartungsintensiver. Eine globale Template-CSS-Regel wäre für dieses Labor keine sichere Alternative.
Vergleich und Empfehlung
| Kriterium | A · Klassen | B · Theme | C · lokales CSS |
| Runde Knoten | Gut, formabhängig | Gut, mit kräftigerem Rahmen | Stark gerundet |
| Lesbarkeit | Ruhig, dünne Pfeile | Gut, etwas schwerere Konturen | Gut nach gezielter Korrektur der Kantenlabels |
| Abstand | Renderer-Standard | Diagrammvariable | Diagrammvariable und CSS |
| Portabilität | Hoch | Mittel | Geringer |
| Wartung | Gering | CDN-/Theme-Version beobachten | SVG-Struktur und CSS bei Versionswechsel prüfen |
Technische Empfehlung: A als Ausgangspunkt für spätere redaktionelle Arbeit. Die endgültige visuelle Auswahl trifft der Benutzer anhand der Browserdarstellung. Keine Variante wird automatisch in V2 oder die produktive Gazette übernommen.
