Themenkonfiguration
Dynamische und integrierte Themenkonfiguration wurde in der Mermaid-Version 8.7.0 eingeführt.
Themen können nun auf der globalen Ebene oder für einzelne Mermaid-Diagramme angepasst werden. Für die globale Themenanpassung wird der initialize-Aufruf verwendet. Für diagrammspezifische Anpassungen wird die init-Direktive verwendet.
Verfügbare Themen
default - Dies ist das Standardthema für alle Diagramme.
neutral - Dieses Thema eignet sich hervorragend für Schwarz-Weiß-Dokumente, die gedruckt werden.
dark - Dieses Thema passt gut zu dunklen Elementen oder zum Dunkelmodus.
forest - Dieses Thema enthält Grüntöne.
base - Dies ist das einzige Thema, das modifiziert werden kann. Verwenden Sie dieses Thema als Grundlage für Anpassungen.
Globale Themen
Um Themen global anzupassen, rufen Sie die Methode initialize auf dem mermaid auf.
Beispiel für den initialize-Aufruf, der das theme auf base setzt:
mermaid.initialize({
securityLevel: 'loose',
theme: 'base',
});Diagrammspezifische Themen
Um das Thema eines einzelnen Diagramms anzupassen, verwenden Sie die init-Direktive.
Beispiel für die init-Direktive, die das theme auf forest setzt:
Code:
Erinnerung: Das einzige Thema, das angepasst werden kann, ist das
base-Thema. Der folgende Abschnitt behandelt, wiethemeVariablesfür Anpassungen verwendet werden kann.
Anpassen von Themen mit themeVariables
Um ein benutzerdefiniertes Thema zu erstellen, ändern Sie themeVariables über init.
Sie müssen das base Thema verwenden, da es das einzige modifizierbare Thema ist.
| Parameter | Beschreibung | Typ | Eigenschaften |
|---|---|---|---|
| themeVariables | Modifizierbar mit der init-Direktive | Objekt | primaryColor, primaryTextColor, lineColor (siehe vollständige Liste) |
Beispiel für die Änderung von themeVariables mit der init-Direktive:
Code:
Farbe und Farbberechnung
Um die Lesbarkeit des Diagramms sicherzustellen, wird der Standardwert bestimmter Variablen berechnet oder aus anderen Variablen abgeleitet. Zum Beispiel wird die primaryBorderColor aus der Variablen primaryColor abgeleitet. Wenn die Variable primaryColor angepasst wird, passt Mermaid die primaryBorderColor automatisch an. Anpassungen können eine Farbinversion, eine Farbtonänderung, ein Verdunkeln/Erhellen um 10 % usw. bedeuten.
Die Themen-Engine erkennt nur Hex-Farben und nicht Farbnamen. Der Wert #ff0000 funktioniert, aber red nicht.
Themenvariablen
| Variable | Standardwert | Beschreibung |
|---|---|---|
| darkMode | false | Beeinflusst, wie abgeleitete Farben berechnet werden. Setzen Sie den Wert auf true für den Dunkelmodus. |
| background | #f4f4f4 | Wird zur Berechnung der Farbe für Elemente verwendet, die entweder hintergrundfarbig oder kontrastierend zum Hintergrund sein sollen |
| fontFamily | trebuchet ms, verdana, arial | |
| fontSize | 16px | Schriftgröße in Pixeln |
| primaryColor | #fff4dd | Farbe, die als Hintergrund in Knoten verwendet wird, andere Farben werden von dieser abgeleitet |
| primaryTextColor | berechnet aus darkMode #ddd/#333 | Farbe, die als Textfarbe in Knoten unter Verwendung von primaryColor verwendet wird |
| secondaryColor | berechnet aus primaryColor | |
| primaryBorderColor | berechnet aus primaryColor | Farbe, die als Rand in Knoten unter Verwendung von primaryColor verwendet wird |
| secondaryBorderColor | berechnet aus secondaryColor | Farbe, die als Rand in Knoten unter Verwendung von secondaryColor verwendet wird |
| secondaryTextColor | berechnet aus secondaryColor | Farbe, die als Textfarbe in Knoten unter Verwendung von secondaryColor verwendet wird |
| tertiaryColor | berechnet aus primaryColor | |
| tertiaryBorderColor | berechnet aus tertiaryColor | Farbe, die als Rand in Knoten unter Verwendung von tertiaryColor verwendet wird |
| tertiaryTextColor | berechnet aus tertiaryColor | Farbe, die als Textfarbe in Knoten unter Verwendung von tertiaryColor verwendet wird |
| noteBkgColor | #fff5ad | Farbe, die als Hintergrund in Notizen verwendet wird |
| noteTextColor | #333 | Textfarbe in Notizrechtecken |
| noteBorderColor | berechnet aus noteBkgColor | Randfarbe in Notizrechtecken |
| lineColor | berechnet aus background | |
| textColor | berechnet aus primaryTextColor | Text im Diagramm über dem Hintergrund, z. B. Text auf Etiketten und auf Signalen im Sequenzdiagramm oder der Titel im Gantt-Diagramm |
| mainBkg | berechnet aus primaryColor | Hintergrund in Flussdiagrammobjekten wie Rechtecken/Kreisen, Klassenstuhl-Klassendiagrammen, Sequenzdiagrammen usw. |
| errorBkgColor | tertiaryColor | Farbe für Syntaxfehlernachricht |
| errorTextColor | tertiaryTextColor | Farbe für Syntaxfehlernachricht |
Flussdiagrammvariablen
| Variable | Standardwert | Beschreibung |
|---|---|---|
| nodeBorder | primaryBorderColor | Knotenrandfarbe |
| clusterBkg | tertiaryColor | Hintergrund in Teilgrafiken |
| clusterBorder | tertiaryBorderColor | Cluster-Randfarbe |
| defaultLinkColor | lineColor | Linkfarbe |
| titleColor | tertiaryTextColor | Titel-Farbe |
| edgeLabelBackground | berechnet aus secondaryColor | |
| nodeTextColor | primaryTextColor | Farbe für Text in Knoten |
Sequenzdiagrammvariablen
| Variable | Standardwert | Beschreibung |
|---|---|---|
| actorBkg | mainBkg | Hintergrundfarbe des Darstellers |
| actorBorder | primaryBorderColor | Randfarbe des Darstellers |
| actorTextColor | primaryTextColor | Textfarbe des Darstellers |
| actorLineColor | actorBorder | Linienfarbe des Darstellers |
| signalColor | textColor | Signalfarbe |
| signalTextColor | textColor | Signalfarbe |
| labelBoxBkgColor | actorBkg | Hintergrundfarbe der Beschriftungsbox |
| labelBoxBorderColor | actorBorder | Randfarbe der Beschriftungsbox |
| labelTextColor | actorTextColor | Textfarbe der Beschriftung |
| loopTextColor | actorTextColor | Schleifen-Textfarbe |
| activationBorderColor | berechnet aus secondaryColor | Aktivierungsrandfarbe |
| activationBkgColor | secondaryColor | Aktivierungshintergrundfarbe |
| sequenceNumberColor | berechnet aus lineColor | Farbsequenznummer |
Kuchendiagrammvariablen
| Variable | Standardwert | Beschreibung |
|---|---|---|
| pie1 | primaryColor | Füllung für 1. Abschnitt im Kuchendiagramm |
| pie2 | secondaryColor | Füllung für 2. Abschnitt im Kuchendiagramm |
| pie3 | berechnet aus tertiary | Füllung für 3. Abschnitt im Kuchendiagramm |
| pie4 | berechnet aus primaryColor | Füllung für 4. Abschnitt im Kuchendiagramm |
| pie5 | berechnet aus secondaryColor | Füllung für 5. Abschnitt im Kuchendiagramm |
| pie6 | berechnet aus tertiaryColor | Füllung für 6. Abschnitt im Kuchendiagramm |
| pie7 | berechnet aus primaryColor | Füllung für 7. Abschnitt im Kuchendiagramm |
| pie8 | berechnet aus primaryColor | Füllung für 8. Abschnitt im Kuchendiagramm |
| pie9 | berechnet aus primaryColor | Füllung für 9. Abschnitt im Kuchendiagramm |
| pie10 | berechnet aus primaryColor | Füllung für 10. Abschnitt im Kuchendiagramm |
| pie11 | berechnet aus primaryColor | Füllung für 11. Abschnitt im Kuchendiagramm |
| pie12 | berechnet aus primaryColor | Füllung für 12. Abschnitt im Kuchendiagramm |
| pieTitleTextSize | 25px | Titeltextgröße |
| pieTitleTextColor | taskTextDarkColor | Titeltextfarbe |
| pieSectionTextSize | 17px | Textgröße der einzelnen Abschnittsbeschriftungen |
| pieSectionTextColor | textColor | Textfarbe der einzelnen Abschnittsbeschriftungen |
| pieLegendTextSize | 17px | Textgröße der Beschriftungen im Diagrammlegend |
| pieLegendTextColor | taskTextDarkColor | Textfarbe der Beschriftungen im Diagrammlegend |
| pieStrokeColor | black | Randfarbe der einzelnen Kuchensegmente |
| pieStrokeWidth | 2px | Randbreite der einzelnen Kuchensegmente |
| pieOuterStrokeWidth | 2px | Randbreite des äußeren Kreises des Kuchendiagramms |
| pieOuterStrokeColor | black | Randfarbe des äußeren Kreises des Kuchendiagramms |
| pieOpacity | 0.7 | Opazität der einzelnen Kuchensegmente |
Zustandsfarben
| Variable | Standardwert | Beschreibung |
|---|---|---|
| labelColor | primaryTextColor | |
| altBackground | tertiaryColor | Wird als Hintergrund in tiefen zusammengesetzten Zuständen verwendet |
Klassenfarben
| Variable | Standardwert | Beschreibung |
|---|---|---|
| classText | textColor | Farbe des Textes in Klassendiagrammen |
Benutzerreise-Farben
| Variable | Standardwert | Beschreibung |
|---|---|---|
| fillType0 | primaryColor | Füllung für 1. Abschnitt im Reisediagramm |
| fillType1 | secondaryColor | Füllung für 2. Abschnitt im Reisediagramm |
| fillType2 | berechnet aus primaryColor | Füllung für 3. Abschnitt im Reisediagramm |
| fillType3 | berechnet aus secondaryColor | Füllung für 4. Abschnitt im Reisediagramm |
| fillType4 | berechnet aus primaryColor | Füllung für 5. Abschnitt im Reisediagramm |
| fillType5 | berechnet aus secondaryColor | Füllung für 6. Abschnitt im Reisediagramm |
| fillType6 | berechnet aus primaryColor | Füllung für 7. Abschnitt im Reisediagramm |
| fillType7 | berechnet aus secondaryColor | Füllung für 8. Abschnitt im Reisediagramm |