GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-28 07:03:17 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
cypress/platform/knsv2.html
View File

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

6
packages/mermaid-mindmap/src/svgDraw.js
View File

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