~~NOTOC~~
====== 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 [[systeme:omnimail:start|V1]] noch den [[systeme:omnimail:entwurf-v2|V2-Entwurf]].

<WRAP important round 80% justify>
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.
</WRAP>

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''

<mermaid>
raw
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
</mermaid>

===== Technischer OmniMail-Ausschnitt =====
''variante-a-technik.mmd'' · SMTP-Eingang, Policy-Anfrage, RCPT-Kontenauskunft und Rückantworten gemäß V2-Referenz.

<mermaid>
raw
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
</mermaid>

**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''

<mermaid>
raw
---
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
</mermaid>

===== Technischer OmniMail-Ausschnitt =====
''variante-b-technik.mmd'' · gleiche Knoten, Beschriftungen und Kanten wie A.

<mermaid>
raw
---
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
</mermaid>

**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''

<mermaid>
raw
---
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
</mermaid>

===== Technischer OmniMail-Ausschnitt =====
''variante-c-technik.mmd'' · gleiche Knoten, Beschriftungen und Kanten wie A und B.

<mermaid>
raw
---
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
</mermaid>

**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.