marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add support for custom cssStyle and compiledStyles for custom classDefs for flowchart

Browse Source
This commit is contained in:
Ashish Jain
2024-06-18 11:48:24 +02:00
parent b6b2b3697d
commit 406c0d869b
5 changed files with 10058 additions and 8251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

359
cypress/platform/knsv2.html
View File

@@ -75,340 +75,45 @@
</style> </style>
</head> </head>
<body> <body>
<h4>Case 1</h4> <pre id="diagram" class="mermaid">
<div class="flex"> flowchart
<pre id="diagram" class="mermaid"> a_a(Aftonbladet) --> b_b[gorilla]:::apa --> c_c{chimp}:::apa -->a_a
stateDiagram-v2 a_a --> c --> d_d --> c_c
AState: Should NOT be white classDef apa fill:#f9f,stroke:#333,stroke-width:4px;
BState class a_a apa;
classDef exampleStyleClass fill:#fff,color: blue; click a_a "http://www.aftonbladet.se" "bookmark"
class AState,BState exampleStyleClass click c_c callback "new tooltip"
style AState fill:#636,border:1px solid red,color:white;
</pre>
<pre id="diagram" class="mermaid">
%%{init: {"look": "classic"} }%%
stateDiagram-v2
AState: Should NOT be white
BState
classDef exampleStyleClass fill:#fff,color: blue;
class AState,BState exampleStyleClass
style AState fill:#636,border:1px solid red,color:white;
</pre>
<pre id="diagram" class="mermaid2">
stateDiagram-v2
classDef exampleStyleClass background:#bbb,border:1px solid red;
a --> b
class a exampleStyleClass
%% a:::exampleStyleClass
</pre>
<pre id="diagram" class="mermaid2">
stateDiagram
direction TB
accTitle: This is the accessible title
accDescr: This is an accessible description
classDef notMoving fill:white
classDef movement font-style:italic;
classDef badBadEvent fill:#f00,color:white,font-weight:bold,stroke-width:2px,stroke:yellow
[*] --> Still:::notMoving
Still --> [*]
Still --> Moving:::movement
Moving --> Still
Moving --> Crash:::movement
Crash:::badBadEvent --> [*]
</pre>
<pre id="diagram" class="mermaid2">
stateDiagram-v2
MyState
note left of MyState : I am a leftie
note right of MyState : I am a rightie
</pre>
<pre id="diagram" class="mermaid2">
stateDiagram
%% direction LR
state C0 {
A0 --> B0
}
C0 --> Apa0
</pre>
<pre id="diagram" class="mermaid2">
stateDiagram
direction LR
state C1 {
A1 --> B1
}
C1 --> Apa1
</pre>
</div>
<h4>Case 2</h4>
<div class="flex">
<pre id="diagram" class="mermaid2">
stateDiagram
direction LR
state Gorilla0 {
state Apa0 {
A0 --> B0
}
}
Apa --> Gorilla0:Label
A0 --> C0
%% C1: "`This is C`"
</pre>
<pre id="diagram" class="mermaid2">
stateDiagram
direction LR
state Apa1 {
A1
}
Apa11 --> Apa1
A1 --> C1
%% C1: "`This is C`"
</pre>
<pre id="diagram" class="mermaid2">
stateDiagram
[*] --> Level1
state Level1 {
[*] --> Level2
state Level2 {
[*] --> level2
level2 --> Level3
state Level3 {
[*] --> level3
level3 --> [*]
}
}
}
</pre>
</div>
<pre id="diagram" class="mermaid2">
flowchart LR
subgraph Apa["Apa"]
B["This is B"]
A["Start"]
end
A --> B & C["C"]
Apa --> C
</pre </pre
> >
<pre id="diagram" class="mermaid2"> <pre id="diagram2" class="mermaid">
flowchart RL
subgraph Apa["Apa"]
subgraph Gorilla
A["Start"]
B["This is B"]
end
end
A --> B & C["C"]
Gorilla --> C
</pre
>
<pre id="diagram" class="mermaid2">
flowchart LR flowchart LR
subgraph Apa["Apa"] id1(Start)-->id2(Stop)
subgraph Gorilla style id1 fill:#f9f,stroke:#333,stroke-width:4px
A["Start"] style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
B["This is B"]
end
end
A --> B & C["C"]
Apa --> C
</pre
>
<pre id="diagram" class="mermaid2">
flowchart LR
subgraph Apa["Apa"]
subgraph Gorilla
B["This is B"]
A["Start"]
end
end
Apa --> C
A --> B & C["C"]
</pre
>
<pre id="diagram" class="mermaid2">
flowchart LR
subgraph Gorilla
subgraph Apa
A[A] --- B
end
end
Apa --- C
A --x C
</pre> </pre>
<pre id="diagram" class="mermaid2"> <pre id="diagram3" class="mermaid">
--- flowchart LR
config: A:::foo & B:::bar --> C:::foobar
look: neo classDef foo stroke:#f00
theme: neo classDef bar stroke:#0f0
layout: elk classDef ash color:red
elk.mergeEdges: true class C ash
themeVariables: {} style C stroke:#00f, fill:black
---
%% 'elk.stress',
%% 'elk.force'
%%'elk.mrtree'
%% 'elk.sporeOverlap
stateDiagram
direction TB
A --> B
A --> C
A --> D
A --> E
A --> F
state F {
Another
}
Another --> A
</pre>
</pre <pre id="diagram4" class="mermaid">
>
<pre id="diagram" class="mermaid2">
flowchart LR
Apa --Hello--> C
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "dagre", "mergeEdges": false} }%%
flowchart LR
A ==> B(This is B)
A[Start] --> B(Is it?)
B -- Yes --> C[OK]
C --> D[Rethink]
D --> B
B -. No ...-> E[End]
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": true} }%%
flowchart
A --> B(This is B)
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
stateDiagram stateDiagram
state if_state &lt;&lt;choice&gt;&gt; A:::foo
[*] --> IsPositive B:::bar --> C:::foobar
IsPositive --> if_state classDef foo stroke:#f00
if_state --> False: if n < 0 classDef bar stroke:#0f0
if_state --> True : if n >= 0 style C stroke:#00f, fill:black, color:white
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": false, "elk.nodePlacement.strategy": "SIMPLE"} }%%
stateDiagram
state if_state &lt;&lt;choice&gt;&gt;
[*] --> IsPositive
IsPositive --> if_state
if_state --> False: if n < 0
if_state --> True : if n >= 0
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
stateDiagram
direction TB
State T1 {
T12--> T11
}
T1 --> T2
T11 --> T2
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "dagre", "mergeEdges": true} }%%
stateDiagram
State T1 {
T21
--
T22
}
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layouts": "elk2", "mergeEdges": true} }%%
stateDiagram
State S1 {
direction TB
S11
}
S1 --> S2
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
State T1 {
T21
--
T22
}
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk", "mergeEdges": true} }%%
stateDiagram
[*] --> T1
T1 --> T2
T1 --> T3
T1 --> T4
</pre
>
<pre id="diagram" class="mermaid2">
%%{init: {"layout": "elk"} }%%
stateDiagram
[*] --> T1
T1 --> T2
T2 --> T3
T3 --> T1
T1 --> T3
</pre
>
<pre id="diagram" class="mermaid2">
stateDiagram
State1: The state with a note
note right of State1
Important information! You can write
notes.
end note
</pre
>
<pre id="diagram" class="mermaid2">
stateDiagram-v2
direction LR
[*] --> Active
state Active { </pre>
direction BT
[*] --> Inner
Inner --> NumLockOn : EvNumLockPressed
}
%% Outer --> Inner
</pre
>
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
@@ -417,10 +122,13 @@ stateDiagram-v2
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err); console.error('Mermaid error: ', err);
}; };
window.callback = function () {
alert('A callback was triggered');
};
mermaid.initialize({ mermaid.initialize({
// theme: 'base', // theme: 'base',
// handdrawnSeed: 12, // handdrawnSeed: 12,
look: 'handdrawn', // look: 'handdrawn',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX', // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
// layout: 'dagre', // layout: 'dagre',
// layout: 'elk', // layout: 'elk',
@@ -437,6 +145,7 @@ stateDiagram-v2
}, },
fontSize: 12, fontSize: 12,
logLevel: 0, logLevel: 0,
securityLevel: 'loose',
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');

12
packages/mermaid/src/diagrams/flowchart/flowDiagram-v2.ts
View File

@@ -1,8 +1,8 @@
// @ts-ignore: JISON doesn't support types // @ts-ignore: JISON doesn't support types
import flowParser from './parser/flow.jison'; import flowParser from './parser/flow.jison';
import flowDb from './flowDb.js'; import flowDb from './flowDb.js';
import flowRendererV2 from './flowRenderer-v2.js'; //import flowRendererV2 from './flowRenderer-v2.js';
// import flowRendererV3 from './flowRenderer-v3-unified.js'; import flowRendererV3 from './flowRenderer-v3-unified.js';
import flowStyles from './styles.js'; import flowStyles from './styles.js';
import type { MermaidConfig } from '../../config.type.js'; import type { MermaidConfig } from '../../config.type.js';
import { setConfig } from '../../diagram-api/diagramAPI.js'; import { setConfig } from '../../diagram-api/diagramAPI.js';
@@ -10,8 +10,8 @@ import { setConfig } from '../../diagram-api/diagramAPI.js';
export const diagram = { export const diagram = {
parser: flowParser, parser: flowParser,
db: flowDb, db: flowDb,
renderer: flowRendererV2, // renderer: flowRendererV2,
// renderer: flowRendererV3, renderer: flowRendererV3,
styles: flowStyles, styles: flowStyles,
init: (cnf: MermaidConfig) => { init: (cnf: MermaidConfig) => {
if (!cnf.flowchart) { if (!cnf.flowchart) {
@@ -20,8 +20,8 @@ export const diagram = {
cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute; cnf.flowchart.arrowMarkerAbsolute = cnf.arrowMarkerAbsolute;
// flowchart-v2 uses dagre-wrapper, which doesn't have access to flowchart cnf // flowchart-v2 uses dagre-wrapper, which doesn't have access to flowchart cnf
setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } }); setConfig({ flowchart: { arrowMarkerAbsolute: cnf.arrowMarkerAbsolute } });
flowRendererV2.setConf(cnf.flowchart); // flowRendererV2.setConf(cnf.flowchart);
// flowRendererV3.setConf(cnf.flowchart); flowRendererV3.setConf(cnf.flowchart);
flowDb.clear(); flowDb.clear();
flowDb.setGen('gen-2'); flowDb.setGen('gen-2');
}, },

6
packages/mermaid/src/diagrams/flowchart/styles.ts
View File

@@ -38,11 +38,11 @@ const getStyles = (options: FlowChartStyleOptions) =>
.cluster-label text { .cluster-label text {
fill: ${options.titleColor}; fill: ${options.titleColor};
} }
.cluster-label span,p { .cluster-label span {
color: ${options.titleColor}; color: ${options.titleColor};
} }
.label text,span,p { .label text,span {
fill: ${options.nodeTextColor || options.textColor}; fill: ${options.nodeTextColor || options.textColor};
color: ${options.nodeTextColor || options.textColor}; color: ${options.nodeTextColor || options.textColor};
} }
@@ -119,7 +119,7 @@ const getStyles = (options: FlowChartStyleOptions) =>
fill: ${options.titleColor}; fill: ${options.titleColor};
} }
.cluster span,p { .cluster span {
color: ${options.titleColor}; color: ${options.titleColor};
} }
/* .cluster div { /* .cluster div {

1
packages/mermaid/src/diagrams/state/stateRenderer-v3-unified.ts
View File

@@ -50,6 +50,7 @@ export const draw = async function (text: string, id: string, _version: string,
// The getData method provided in all supported diagrams is used to extract the data from the parsed structure // The getData method provided in all supported diagrams is used to extract the data from the parsed structure
// into the Layout data format // into the Layout data format
const data4Layout = diag.db.getData() as LayoutData; const data4Layout = diag.db.getData() as LayoutData;
// Create the root SVG - the element is the div containing the SVG element // Create the root SVG - the element is the div containing the SVG element
const { element, svg } = getDiagramElements(id, securityLevel); const { element, svg } = getDiagramElements(id, securityLevel);

17931
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff