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

MC-1730 Applying look to nodes

Browse Source
This commit is contained in:
Knut Sveidqvist
2024-06-13 10:01:20 +02:00
parent 67cf57ae4f
commit 9fbad9c9c1
5 changed files with 101 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
.vscode/launch.json vendored
View File

@@ -13,17 +13,17 @@
"smartStep": true,
"console": "integratedTerminal"
},
{
"name": "Docs generation",
"type": "node",
"request": "launch",
"args": ["scripts/docs.cli.mts"],
// we'll need to change this to --import in Node.JS v20.6.0 and up
"runtimeArgs": ["--loader", "tsx/esm"],
"cwd": "${workspaceRoot}/packages/mermaid",
"skipFiles": ["<node_internals>/**", "**/node_modules/**"],
"smartStep": true,
"internalConsoleOptions": "openOnSessionStart"
}
// {
// "name": "Docs generation",
// "type": "node",
// "request": "launch",
// "args": ["scripts/docs.cli.mts"],
// // we'll need to change this to --import in Node.JS v20.6.0 and up
// "runtimeArgs": ["--loader", "tsx/esm"],
// "cwd": "${workspaceRoot}/packages/mermaid",
// "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
// "smartStep": true,
// "internalConsoleOptions": "openOnSessionStart"
// }
]
}

114
cypress/platform/knsv2.html
View File

@@ -75,27 +75,80 @@
</style>
</head>
<body>
<pre id="diagram" class="mermaid2">
---
config:
theme: neo
look: neo
layout: elk
elk.mergeEdges: true
themeVariables: {}
---
stateDiagram
direction TB
A --> B
A --> C
A --> D
A --> E
A --> F
</pre
>
<pre id="diagram" class="mermaid2">
---
config:
theme: default
look: classic
layout: elk
---
flowchart TD
subgraph subgraph_ao83d50qa["Subgraph"]
C("Let me think")
end
A["Easter"] -- Get eggs --> B("Go shopping")
B o--o C
B --> H["H"]
C -- One --> D["Laptop"]
C -- Two --> E["iPhone"]
C -- Three --> F["fa:fa-car Car"]
C --> G["G"]
G --> H
H --> C & E
D --> E
F --> E
style B stroke:#FF6D00,stroke-width:4px,stroke-dasharray: 0,fill:#FFFFFF
</pre
>
<pre id="diagram" class="mermaid2">
---
config:
theme: default
look: classic
layout: elk
---
flowchart TD
subgraph subgraph_ao83d50qa["Subgraph1"]
C("Let me think")
end
A["Easter"] -- Get eggs --> B("Go shopping")
B o--o C
B --> H["H"]
C -- One --> D["Laptop"]
C -- Two --> E["iPhone"]
C -- Three --> F["fa:fa-car Car"]
C --> G["G"]
G --> H
H --> C & E
D --> E
F --> E
style B stroke:#FF6D00,stroke-width:4px,stroke-dasharray: 0,fill:#FFFFFF
</pre
>
<pre id="diagram" class="mermaid">
flowchart LR
subgraph Apa["Apa"]
A["Start"]
B["This is B"]
end
A --> B & C["C"]
Apa --> C
</pre
>
<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 id="diagram" class="mermaid2">
flowchart RL
subgraph Apa["Apa"]
subgraph Gorilla
@@ -301,7 +354,7 @@ stateDiagram
end note
</pre
>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
stateDiagram-v2
direction LR
[*] --> Active
@@ -317,24 +370,25 @@ stateDiagram-v2
<script type="module">
import mermaid from './mermaid.esm.mjs';
// import { layouts } from './mermaid-layout-elk.esm.mjs';
// mermaid.registerLayoutLoaders(layouts);
import { layouts } from './mermaid-layout-elk.esm.mjs';
mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'base',
theme: 'neo',
// handdrawnSeed: 12,
// look: 'handdrawn',
look: 'neo',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
layout: 'dagre',
// layout: 'dagre',
// layout: 'elk',
// layout: 'fixed',
// htmlLabels: false,
flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat',
fontFamily: 'Kalam',
// fontFamily: 'Kalam',
// fontFamily: 'courier',
fontFamily: 'arial',
sequence: {
actorFontFamily: 'courier',
noteFontFamily: 'courier',
@@ -350,12 +404,6 @@ stateDiagram-v2
console.error('In parse error:');
console.error(err);
};
void (async () => {
const { svg } = await mermaid.render('the-id-of-the-svg', code);
console.log(svg);
const elem = document.querySelector('#graph-to-be');
elem.innerHTML = svg;
})();
</script>
</body>
</html>

2
packages/mermaid/src/config.type.ts
View File

@@ -68,7 +68,7 @@ export interface MermaidConfig {
* Defines which main look to use for the diagram.
*
*/
look?: 'classic' | 'handdrawn' | 'neo';
look?: 'classic' | 'handdrawn';
/**
* Defines the seed to be used when using handdrawn look. This is important for the automated tests as they will always find differences without the seed. The default value is 0 which gives a random seed.
*

2
packages/mermaid/src/rendering-util/rendering-elements/nodes.js
View File

@@ -85,6 +85,8 @@ export const insertNode = async (elem, node, dir) => {
newEl.attr('data-id', node.id);
newEl.attr('data-node', true);
newEl.attr('data-et', 'node');
newEl.attr('data-look', node.look);
if (node.tooltip) {
el.attr('title', node.tooltip);
}

5
packages/mermaid/src/styles.ts
View File

@@ -72,6 +72,11 @@ const getStyles = (
.node .neo-node {
stroke: ${options.nodeBorder};
}
[data-look="neo"].node rect {
stroke: ${options.nodeBorder};
stroke: red !important
}
${userStyles}
`;
};