marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-24 17:59:39 +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, "smartStep": true,
"console": "integratedTerminal" "console": "integratedTerminal"
}, },
{ // {
"name": "Docs generation", // "name": "Docs generation",
"type": "node", // "type": "node",
"request": "launch", // "request": "launch",
"args": ["scripts/docs.cli.mts"], // "args": ["scripts/docs.cli.mts"],
// we'll need to change this to --import in Node.JS v20.6.0 and up // // we'll need to change this to --import in Node.JS v20.6.0 and up
"runtimeArgs": ["--loader", "tsx/esm"], // "runtimeArgs": ["--loader", "tsx/esm"],
"cwd": "${workspaceRoot}/packages/mermaid", // "cwd": "${workspaceRoot}/packages/mermaid",
"skipFiles": ["<node_internals>/**", "**/node_modules/**"], // "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
"smartStep": true, // "smartStep": true,
"internalConsoleOptions": "openOnSessionStart" // "internalConsoleOptions": "openOnSessionStart"
} // }
] ]
} }

114
cypress/platform/knsv2.html
View File

@@ -75,27 +75,80 @@
</style> </style>
</head> </head>
<body> <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"> <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 flowchart RL
subgraph Apa["Apa"] subgraph Apa["Apa"]
subgraph Gorilla subgraph Gorilla
@@ -301,7 +354,7 @@ stateDiagram
end note end note
</pre </pre
> >
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid2">
stateDiagram-v2 stateDiagram-v2
direction LR direction LR
[*] --> Active [*] --> Active
@@ -317,24 +370,25 @@ stateDiagram-v2
<script type="module"> <script type="module">
import mermaid from './mermaid.esm.mjs'; import mermaid from './mermaid.esm.mjs';
// import { layouts } from './mermaid-layout-elk.esm.mjs'; import { layouts } from './mermaid-layout-elk.esm.mjs';
// mermaid.registerLayoutLoaders(layouts); mermaid.registerLayoutLoaders(layouts);
mermaid.parseError = function (err, hash) { mermaid.parseError = function (err, hash) {
console.error('Mermaid error: ', err); console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
// theme: 'base', theme: 'neo',
// handdrawnSeed: 12, // handdrawnSeed: 12,
// look: 'handdrawn', look: 'neo',
// 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX', // 'elk.nodePlacement.strategy': 'NETWORK_SIMPLEX',
layout: 'dagre', // layout: 'dagre',
// layout: 'elk', // layout: 'elk',
// layout: 'fixed', // layout: 'fixed',
// htmlLabels: false, // htmlLabels: false,
flowchart: { titleTopMargin: 10 }, flowchart: { titleTopMargin: 10 },
// fontFamily: 'Caveat', // fontFamily: 'Caveat',
fontFamily: 'Kalam', // fontFamily: 'Kalam',
// fontFamily: 'courier', // fontFamily: 'courier',
fontFamily: 'arial',
sequence: { sequence: {
actorFontFamily: 'courier', actorFontFamily: 'courier',
noteFontFamily: 'courier', noteFontFamily: 'courier',
@@ -350,12 +404,6 @@ stateDiagram-v2
console.error('In parse error:'); console.error('In parse error:');
console.error(err); 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> </script>
</body> </body>
</html> </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. * 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. * 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-id', node.id);
newEl.attr('data-node', true); newEl.attr('data-node', true);
newEl.attr('data-et', 'node'); newEl.attr('data-et', 'node');
newEl.attr('data-look', node.look);
if (node.tooltip) { if (node.tooltip) {
el.attr('title', node.tooltip); el.attr('title', node.tooltip);
} }

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

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