Merge pull request #4018 from mermaid-js/4016-differentiate-colors

Mindmaps: differentiate the colors between the root node and the first section #4017
This commit is contained in:
pbrolin47 2023-01-20 09:16:02 +01:00 committed by GitHub
commit 7b67f5783e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 17 deletions

View File

@ -54,7 +54,7 @@
</style>
</head>
<body>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
graph TB
a --> b
@ -62,14 +62,14 @@ graph TB
b --> d
c --> d
</pre>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
flowchart-elk TB
a --> b
a --> c
b --> d
c --> d
</pre>
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
@ -125,7 +125,7 @@ flowchart TB
</pre
>
<br />
<pre id="diagram" class="mermaid">
<pre id="diagram" class="mermaid2">
flowchart TB
%% I could not figure out how to use double quotes in labels in Mermaid
subgraph ibm[IBM Espresso CPU]
@ -227,14 +227,24 @@ sequenceDiagram
Customer->>+Merchant: Receives goods or services
</pre
>
<pre id="diagram" class="mermaid2">
gantt
title Style today marker (vertical line should be 5px wide and half-transparent blue)
dateFormat YYYY-MM-DD
axisFormat %d
todayMarker stroke-width:5px,stroke:#00f,opacity:0.5
section Section1
Today: 1, -1h
<pre id="diagram" class="mermaid">
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid
</pre>
<!-- <div id="cy"></div> -->
@ -252,7 +262,7 @@ sequenceDiagram
// console.error('Mermaid error: ', err);
};
mermaid.initialize({
// theme: 'forest',
theme: 'dark',
startOnLoad: true,
logLevel: 0,
flowchart: {

View File

@ -203,14 +203,12 @@ const roundedRectBkg = function (elem, node) {
* @returns {number} The height nodes dom element
*/
export const drawNode = function (elem, node, fullSection, conf) {
const section = (fullSection % MAX_SECTIONS) - 1;
const section = fullSection % MAX_SECTIONS;
const nodeElem = elem.append('g');
node.section = section;
nodeElem.attr(
'class',
(node.class ? node.class + ' ' : '') +
'mindmap-node ' +
(section < 0 ? 'section-root' : 'section-' + section)
(node.class ? node.class + ' ' : '') + 'mindmap-node ' + ('section-' + section)
);
const bkgElem = nodeElem.append('g');