Komponenten / Framework
Mermaid
Architektur, Abläufe und Zusammenhänge als Diagramm. Fünf ausführbare Muster mit Brand-Farben, Vollbild und eigenem Editor.
Diagrammgalerie wird geladen …
Architektur, Abläufe und Zusammenhänge als Diagramm. Fünf ausführbare Muster mit Brand-Farben, Vollbild und eigenem Editor.
Diagrammgalerie wird geladen …
Alle Beispiele werden automatisch gerendert. Öffne ein Diagramm per Klick im Vollbild. Brand und Darstellung oben steuern Farben und Schrift gemeinsam.
Quelle, Auslieferung und Anwendung erhalten gezielte Akzente. Übrige Knoten, Kanten und Gruppen bleiben neutral.
Diagramm wird gerendert …
flowchart LR
Source[Design-Vertrag] --> Package[Framework-Paket]
Package --> App[Anwendung]
Source -. Referenz .-> Showcase[Showcase]
Package -. Komponenten .-> Showcase
classDef source fill:#505866,color:#ffffff,stroke:#3d434e,stroke-width:2px;
classDef delivery fill:#263b70,color:#ffffff,stroke:#1d2d55,stroke-width:2px;
classDef consumer fill:#17264a,color:#ffffff,stroke:#111d38,stroke-width:2px;
class Source source;
class Package delivery;
class App consumer;Akteure, Lebenslinien, Signale und Notizen haben eigene Farbrollen. So bleibt der Ablauf auch in dunkler Darstellung lesbar.
Diagramm wird gerendert …
sequenceDiagram
accTitle: Beispiel einer Veröffentlichung
accDescr: Ein Push startet die Prüfung. Nur ein erfolgreich geprüfter Build wird veröffentlicht.
autonumber
participant Dev as Entwicklung
participant Git as GitHub
participant CI as Prüfung
participant Web as Website
Dev->>Git: Push auf main
Git->>CI: Tests und Build starten
Note over Git,CI: Beispielablauf – kein Live-Status
alt Prüfung erfolgreich
CI-->>Git: Build freigegeben
Git->>Web: Version veröffentlichen
Web-->>Dev: Vorschau öffnen
else Prüfung fehlgeschlagen
CI-->>Dev: Fehlerbericht
endAbschnitte und Ereignisse verwenden die Brand-Palette. Jede Kategorie wird beschriftet; die Farbe unterstützt die Orientierung.
Diagramm wird gerendert …
timeline
accTitle: Beispiel einer Projektplanung
title Von der Grundlage zur Anwendung
section Grundlage
Entwurf : Brand-Vertrag : Tokens und Typografie
Referenz : Komponenten : Dokumentation
section Umsetzung
Integration : Anwendung : Barrierefreiheit
Abnahme : Tests und Build : VeröffentlichungVolle Deckkraft, klare Segmentgrenzen und weisse Werte auf kontrastreichen Flächen. Die Legende nennt Kategorie und Wert.
Diagramm wird gerendert …
pie showData
accTitle: Dokumentierte Bausteine, illustrative Beispieldaten
title Dokumentierte Bausteine · Beispiel
"Spezifikationen" : 4
"Anleitungen" : 8
"Rezepte" : 6260 px Umbruchbreite und 10 px Innenabstand geben langen Aussagen Platz. Die Schrift wird vor der Vermessung geladen; Kantenbeschriftungen bleiben kurz.
Diagramm wird gerendert …
flowchart TB
A[Projektauftrag] -->|Analyse| B[Belegte Aussagen aus Repository und Dokumentation für eine nachvollziehbare Management-Entscheidung]
B -->|Freigabe| C[Eine editierbare Präsentation mit Quellen, Zuständigkeiten und konkreten nächsten Schritten]Ein Beispiel übernehmen oder eigenen Mermaid-Code eingeben. «Diagramm rendern» übernimmt deine Änderungen in die Vorschau.
Diagramm wird gerendert …
flowchart LR
Auftrag[Projektauftrag] --> Analyse[Belegte Aussagen]
Analyse --> Entscheid[Entscheidung]
Entscheid --> Umsetzung[Umsetzung]Das Basis-Theme steuert Knoten und Kanten, Sequenzen, Notizen, Kategorien und Torten separat. Die SVG-Vermessung und das sichtbare Diagramm verwenden dieselbe geladene Schrift.
await document.fonts.ready;
mermaid.initialize({
startOnLoad: false,
securityLevel: 'strict',
theme: 'base',
look: 'classic',
fontFamily,
themeVariables: mermaidTheme(brand, mode, fontFamily),
themeCSS: mermaidThemeCSS(brand, mode),
flowchart: { wrappingWidth: 260, padding: 10 }
});
const { svg } = await mermaid.render(id, code, container);Bei mehreren Diagrammen laufen Initialisierung und Rendern nacheinander. Dadurch überschreibt ein Brand-Wechsel keine laufende Vermessung. Der Messcontainer bleibt vermessbar und erbt die aktive Schrift.
Zwölf Flächen mit weissen Beschriftungen und mindestens 4,5:1 Textkontrast. Die Werte bleiben in beiden Darstellungen gleich; Flächen, Linien und Begleittexte wechseln mit dem Modus.
#263b70#12633b#755000#a21b32#505866#20325e#0f5332#624300#88172a#434a56#1a284c#0c4328| Diagrammtyp | Stand |
|---|---|
| Flowchart | Vollständig thematisiert · zwei Beispiele |
| Sequence | Akteure, Signale, Schleifen und Notizen · Beispiel |
| Timeline | Zwölf Kategorien · Beispiel |
| Pie | Zwölf Segmente, Werte und Legende · Beispiel |
| Journey / GitGraph | Paletten vorbereitet; noch keine eigene Abnahme |
| Weitere Mermaid-Typen | Im Editor verfügbar; keine vollständige Brand-Abnahme |