marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 14:59:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Updated with a small example of a custom theme

Browse Source
This commit is contained in:
Knut Sveidqvist
2020-07-31 16:04:12 +02:00
parent e9e9b13df0
commit 87f12c7d5a
2 changed files with 60 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
cypress/platform/current.html
View File

@@ -74,15 +74,22 @@ stateDiagram-v2
A --> D: asd123 A --> D: asd123
</div> </div>
</div> </div>
%%{init: {'theme': 'base', 'themeVariables':{ 'primaryColor': '#ff0000'}}}%%
<div class="mermaid" style="width: 50%; height: 20%;"> <div class="mermaid" style="width: 50%; height: 20%;">
%%{init: {'theme': 'dark'}}%% %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
graph TD
flowchart TB A[Christmas] -->|Get money| B(Go shopping)
subgraph apa B --> C{Let me think}
a --> A %% comment B --> G[/Another/]
a --> a{apa} %% comment C ==>|One| D[Laptop]
end C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
subgraph section
C
D
E
F
G
end
</div> </div>
<div class="mermaid2" style="width: 50%; height: 20%;"> <div class="mermaid2" style="width: 50%; height: 20%;">
graph TD graph TD
@@ -106,7 +113,7 @@ Note over Bob,Alice: Looks back
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
theme: 'forest', // theme: 'forest',
// themeVariables:{primaryColor: '#ff0000'}, // themeVariables:{primaryColor: '#ff0000'},
// arrowMarkerAbsolute: true, // arrowMarkerAbsolute: true,
// themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}', // themeCSS: '.edgePath .path {stroke: red;} .arrowheadPath {fill: red;}',

47
docs/theming.md
View File

@@ -152,10 +152,9 @@ Variables derived from the ones above:
| name | Default value | Description | | name | Default value | Description |
**Here is an example of overriding `primaryColor` and giving everything a ifferent look, using `%%init%%`. **Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
``` ```
mermaid %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
%%{init: {'theme':'base', 'themeVariables': {primaryColor: '#ff0000'}}%%
graph TD graph TD
A[Christmas] -->|Get money| B(Go shopping) A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think} B --> C{Let me think}
@@ -171,6 +170,48 @@ mermaid
G G
end end
``` ```
Thsi got a bit to dark and bit to colorful. With some easy steps this can be fixed:
* Make the primary color a little lighter
* set the teriary color to a redish shade as well
* make the edge label background differ from the subgraph by setting the 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
```
```mermaid
%%{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
```
The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work. The Theming Engine does not admit color codes and will only accept proper color values. Color Names is not supported so for instance, the color value 'red' will not work, but '#ff0000' will work.
# Common theming activities # Common theming activities