Skip to content

Theme Configuration#

1. Theme Configuration#

バージョン8.7.0では、Mermaidには、ダイアグラムテーマの動的で統合された構成のためのシステムが付属しています。 これの目的は、%% init %%ディレクティブを介してテーマをカスタマイズし、呼び出しを初期化することで、マーメイドのカスタマイズ性とスタイリングの容易さを向上させることです。

テーマは、バージョン8.6.0で導入されたように、構成レベルに従って構築され、ディレクティブを使用してカスタム構成を変更および作成します。

これらのテーマ設定は、ディレクティブと同様に、カスタマイズ性を最大化するためにLive-Editorでも適用可能になります。

2. Side-wide Thems#

サイト全体のテーマは、サイト所有者による初期化によって宣言されます。

通話設定テーマをベースに初期化する例： 

    mermaidAPI.initialize({
        'securityLevel': 'loose', 'theme': 'base'
    });

3. Themes at the Local or Current Level#

mermaidをサポートするWebページでを使用して図を生成する場合。 安全な配列で禁止されていない限り、ディレクティブを使用して、特定の図のサイト全体のテーマ設定をローカルでオーバーライドすることもできます。

%%{init: {'theme':'base'}}%%
  graph TD
    a --> b
%%{init: {'theme':'base'}}%%
  graph TD
    a --> b

これは、%% init %%がテーマを「base」に設定する方法の例です。これはthemeVariablesがデフォルトに設定されていることを前提としています。

  • dark
  • default
  • forest
  • neutral

4. Making a Custom Theme with themeVariables#

カスタムテーマを作成する最も簡単な方法は、基本テーマから始めて、%% init %%を介してthemeVariablesを介してテーマ変数を変更することです。

Parameter Description Type Required Objects contained
themeVariables Array containing objects, modifiable with the %%init%% directive Array Required primaryColor, lineColor, textColor 
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

Info

空のままにすると、すべての変数値がデフォルトに設定されます。

5. Color and Color Calculation#

色の定義にはmarmaidの特定の相互作用があります。これは、図の可視性を確保するためです。mermaidは、読みやすさを補正して維持するために色が変更されると、いくつかの変数を自動的に調整します。

[変数]列の右側にある[デフォルト値]列は、左側の変数とペアになっている/関連付けられている変数と、このペアまたは関連付けの性質を示します。たとえば、primaryColorと表示されている場合は、primaryColor をデフォルト値として取得することを意味します。「primaryColorに基づく」と表示されている場合は、primaryColorから計算/派生していることを意味します。この計算は、原色の反転、色相の変化、10％の暗さまたは明るさなどです。

以下の変数のいずれかを変更することで、独自のテーマを作成できます。暗い背景を使用している場合は、ダークモードをtrueに設定して色を調整します。別のスタイルにしたい場合は、%%init%% の変数名を使用して計算をオーバーライドすることができます。

6. Theme Variables Reference Table#

一部の図に固有の変数は、テーマ変数の変更によって影響を受ける可能性があります

Variable Default/Base/Factor value Calc Description
darkMode false 色の計算方法を指定するブール値。 「true」はダークモードをアクティブにします。
background #f4f4f4 背景色または背景と対照的である必要があるアイテムの色を計算するために使用されます。
primaryColor #fff4dd Color to be used as background in nodes, other colors will be derived from this
fontFamily "trebuchet ms", verdana, arial
fontSize 16px Font Size, in pixels
secondaryColor based on primaryColor *
tertiaryColor based on primaryColor *
primaryBorderColor based on primaryColor * primaryColorを使用してノードの境界線として使用される色
primaryTextColor based on darkMode #ddd/#333 * primaryColorを使用してノードでテキストの色として使用される色
secondaryBorderColor based on secondaryColor * SecondaryColorを使用してノードの境界線として使用される色
secondaryTextColor based on secondaryColor * SecondaryColorを使用してノードでテキストの色として使用される色
tertiaryBorderColor based on tertiaryColor * tertiaryColorを使用してノードの境界線として使用される色
tertiaryTextColor based on tertiaryColor * tertiaryColorを使用してノードの境界線として使用される色
noteBkgColor #fff5ad ノートの背景として使用される色
noteTextColor #333 ノート長方形のテキストの色.
noteBorderColor based on noteBkgColor * ノート長方形の境界線の色。
lineColor based on background *
textColor based on primaryTextColor * 背景上の図のテキスト。たとえば、シーケンス図のラベルや信号のテキスト、またはガント図のタイトル
mainBkg based on primaryColor * 四角形/円、クラス図クラス、シーケンス図などのフローチャートオブジェクトの背景
errorBkgColor tertiaryColor * 構文エラーメッセージの色
errorTextColor tertiaryTextColor * 構文エラーメッセージの色

7. Specific to different diagrams and charts#

Flowchart#

Variable Default/ Associated Value Calc Description
nodeBorder primaryBorderColor * ノードの境界線の色
clusterBkg tertiaryColor * サブグラフの背景
clusterBorder tertiaryBorderColor * クラスターの境界線の色
defaultLinkColor lineColor * リンクの色
titleColor tertiaryTextColor * タイトルの色
edgeLabelBackground based on secondaryColor *
nodeTextColor primaryTextColor * ノード内のテキストの色。

sequence diagram#

name Default value Calc Description
actorBorder primaryBorderColor * Actorのボーダーカラー
actorBkg mainBkg * Actorの背景色
actorTextColor primaryTextColor * Actor テキストの色
actorLineColor grey * Actor の線の色
labelBoxBkgColor actorBkg * ラベルボックスの背景色
signalColor textColor * Signal Color
signalTextColor textColor * Signal Text Color
labelBoxBorderColor actorBorder * ラベルボックスの境界線の色
labelTextColor actorTextColor * Label Text Color
loopTextColor actorTextColor * ループ内線カラー
activationBorderColor based on secondaryColor * アクティベーションボーダーカラー
activationBkgColor secondaryColor * アクティベーションの背景色

state colors#

name Default value Calc Description
labelColor primaryTextColor *
altBackground tertiaryColor * "deep composite states" の背景使用されます

class colors#

name Default value Calc Description
classText textColor * クラス図のテキストの色
name Default value Calc Description
fillType0 primaryColor *
fillType1 secondaryColor * journey diagram の最初のセクションを埋める
fillType2 based on primaryColor * journey diagram の3番目のセクションに記入
fillType3 based on secondaryColor * journey diagram の4番目のセクションに記入
fillType4 based on primaryColor * journey diagram の5番目のセクションに記入
fillType5 based on secondaryColor * journey diagram の6番目のセクションに記入
fillType6 based on primaryColor * journey diagram の7番目のセクションに記入
fillType7 based on secondaryColor * journey diagram の8番目のセクションに記入

Info

値は、交互の外観を作成することを目的としています

primaryColor Overriding#

これは、%% init %%を使用して、primaryColorをオーバーライドし、すべてに異なる外観を与える例です。

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

8. example of overridding#

  • primary color を少し明るくします
  • tertiary color も赤みがかった色に設定します
  • edgeLabelBackground を設定して、エッジラベルの背景をサブグラフとは異なるものにします

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ffcccc', 'edgeLabelBackground':'#ffffee', 'tertiaryColor': '#fff0f0'}}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

9. Common theming activities Flowchart#

How to change the color of the arrows#

矢印の色を変更する方法 Examples: テーマを調整するときは、好みのテーマが図とどのように一致するかを調べて、すべてが表示され、見栄えがよいかどうかを評価すると役立つ場合があります。 次の例では、ディレクティブinitが使用され、テーマがベースとして宣言されています。 ディレクティブの使用の詳細については、バージョン8.6.0のドキュメントを参照してください。

example Flowchart#


%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end 
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        graph TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[/Another/]
          C ==>|One| D[Laptop]
          C -->|Two| E[iPhone]
          C -->|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

10. Common theming activities Flowchart beta#

%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        flowchart TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[Another]
          C ==>|One| D[Laptop]
          C x--x|Two| E[iPhone]
          C o--o|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        flowchart TD
          A[Christmas] -->|Get money| B(Go shopping)
          B --> C{Let me think}
          B --> G[Another]
          C ==>|One| D[Laptop]
          C x--x|Two| E[iPhone]
          C o--o|Three| F[fa:fa-car Car]
          subgraph section
            C
            D
            E
            F
            G
          end

11. Common theming activities Class diagram#

%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%

classDiagram
    Animal "1" <|-- Duck
    Animal <|-- Fish
    Animal <--o Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%

classDiagram
    Animal "1" <|-- Duck
    Animal <|-- Fish
    Animal <--o Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
    class Fish{
        -int sizeInFeet
        -canEat()
    }
    class Zebra{
        +bool is_wild
        +run()
    }

12. Common theming activities Gantt#

gantt
       dateFormat                YYYY-MM-DD
       title                     Adding GANTT diagram functionality to mermaid
       excludes                  :excludes the named dates/days from being included in a charted task..
       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

gantt
       dateFormat                YYYY-MM-DD
       title                     Adding GANTT diagram functionality to mermaid
       excludes                  :excludes the named dates/days from being included in a charted task..
       section A section
       Completed task            :done,    des1, 2014-01-06,2014-01-08
       Active task               :active,  des2, 2014-01-09, 3d
       Future task               :         des3, after des2, 5d
       Future task2              :         des4, after des3, 5d

       section Critical tasks
       Completed task in the critical line :crit, done, 2014-01-06,24h
       Implement parser and jison          :crit, done, after des1, 2d
       Create tests for parser             :crit, active, 3d
       Future task in critical line        :crit, 5d
       Create tests for renderer           :2d
       Add to mermaid                      :1d

       section Documentation
       Describe gantt syntax               :active, a1, after des1, 3d
       Add gantt diagram to demo page      :after a1  , 20h
       Add another diagram to demo page    :doc1, after a1  , 48h

       section Last section
       Describe gantt syntax               :after doc1, 3d
       Add gantt diagram to demo page      :20h
       Add another diagram to demo page    :48h

13. Common theming activities Sequence diagram#

Sequence diagram 

%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        sequenceDiagram
          autonumber
          par Action 1
            Alice->>John: Hello John, how are you?
          and Action 2
            Alice->>Bob: Hello Bob, how are you?
          end
          Alice->>+John: Hello John, how are you?
          Alice->>+John: John, can you hear me?
          John-->>-Alice: Hi Alice, I can hear you!
          Note right of John: John is perceptive
          John-->>-Alice: I feel great!
              loop Every minute
                John-->Alice: Great!
            end

%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
        sequenceDiagram
          autonumber
          par Action 1
            Alice->>John: Hello John, how are you?
          and Action 2
            Alice->>Bob: Hello Bob, how are you?
          end
          Alice->>+John: Hello John, how are you?
          Alice->>+John: John, can you hear me?
          John-->>-Alice: Hi Alice, I can hear you!
          Note right of John: John is perceptive
          John-->>-Alice: I feel great!
              loop Every minute
                John-->Alice: Great!
            end

14. Common theming activities State diagram#

%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
      stateDiagram
        [*] --> Active

        state Active {
            [*] --> NumLockOff
            NumLockOff --> NumLockOn : EvNumLockPressed
            NumLockOn --> NumLockOff : EvNumLockPressed
            --
            [*] --> CapsLockOff
            CapsLockOff --> CapsLockOn : EvCapsLockPressed
            CapsLockOn --> CapsLockOff : EvCapsLockPressed
            --
            [*] --> ScrollLockOff
            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
        }
        state SomethingElse {
          A --> B
          B --> A
        }

        Active --> SomethingElse
        note right of SomethingElse : This is the note to the right.

        SomethingElse --> [*]
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
      stateDiagram
        [*] --> Active

        state Active {
            [*] --> NumLockOff
            NumLockOff --> NumLockOn : EvNumLockPressed
            NumLockOn --> NumLockOff : EvNumLockPressed
            --
            [*] --> CapsLockOff
            CapsLockOff --> CapsLockOn : EvCapsLockPressed
            CapsLockOn --> CapsLockOff : EvCapsLockPressed
            --
            [*] --> ScrollLockOff
            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
        }
        state SomethingElse {
          A --> B
          B --> A
        }

        Active --> SomethingElse
        note right of SomethingElse : This is the note to the right.

        SomethingElse --> [*]

15. Common theming activities State diagram beta#

%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2
        [*] --> Active

        state Active {
            [*] --> NumLockOff
            NumLockOff --> NumLockOn : EvNumLockPressed
            NumLockOn --> NumLockOff : EvNumLockPressed
            --
            [*] --> CapsLockOff
            CapsLockOff --> CapsLockOn : EvCapsLockPressed
            CapsLockOn --> CapsLockOff : EvCapsLockPressed
            --
            [*] --> ScrollLockOff
            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
        }
        state SomethingElse {
          A --> B
          B --> A
        }

        Active --> SomethingElse2
        note right of SomethingElse2 : This is the note to the right.

        SomethingElse2 --> [*]
%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
stateDiagram-v2
        [*] --> Active

        state Active {
            [*] --> NumLockOff
            NumLockOff --> NumLockOn : EvNumLockPressed
            NumLockOn --> NumLockOff : EvNumLockPressed
            --
            [*] --> CapsLockOff
            CapsLockOff --> CapsLockOn : EvCapsLockPressed
            CapsLockOn --> CapsLockOff : EvCapsLockPressed
            --
            [*] --> ScrollLockOff
            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
        }
        state SomethingElse {
          A --> B
          B --> A
        }

        Active --> SomethingElse2
        note right of SomethingElse2 : This is the note to the right.

        SomethingElse2 --> [*]

16. Common theming activities Entity Relations diagram#

 erDiagram
        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
        CUSTOMER ||--o{ ORDER : places
        CUSTOMER ||--o{ INVOICE : "liable for"
        DELIVERY-ADDRESS ||--o{ ORDER : receives
        INVOICE ||--|{ ORDER : covers
        ORDER ||--|{ ORDER-ITEM : includes
        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
        PRODUCT ||--o{ ORDER-ITEM : "ordered in"

 erDiagram
        CUSTOMER }|..|{ DELIVERY-ADDRESS : has
        CUSTOMER ||--o{ ORDER : places
        CUSTOMER ||--o{ INVOICE : "liable for"
        DELIVERY-ADDRESS ||--o{ ORDER : receives
        INVOICE ||--|{ ORDER : covers
        ORDER ||--|{ ORDER-ITEM : includes
        PRODUCT-CATEGORY ||--|{ PRODUCT : contains
        PRODUCT ||--o{ ORDER-ITEM : "ordered in"

17. Common theming activities User journey diagra#

journey
            title My working day
            section Go to work
              Make tea: 5: Me
              Go upstairs: 3: Me
              Do work: 1: Me, Cat
            section Go home
              Go downstairs: 5: Me
              Sit down: 5: Me
journey
            title My working day
            section Go to work
              Make tea: 5: Me
              Go upstairs: 3: Me
              Do work: 1: Me, Cat
            section Go home
              Go downstairs: 5: Me
              Sit down: 5: Me