diff --git a/.build/common.ts b/.build/common.ts
index 274977fa2..e2190974f 100644
--- a/.build/common.ts
+++ b/.build/common.ts
@@ -22,9 +22,9 @@ export const packageOptions = {
packageName: 'mermaid-zenuml',
file: 'detector.ts',
},
- 'mermaid-flowchart-elk': {
- name: 'mermaid-flowchart-elk',
- packageName: 'mermaid-flowchart-elk',
- file: 'detector.ts',
+ 'mermaid-layout-elk': {
+ name: 'mermaid-layout-elk',
+ packageName: 'mermaid-layout-elk',
+ file: 'layouts.ts',
},
} as const;
diff --git a/.build/jisonTransformer.ts b/.build/jisonTransformer.ts
index 314df8a33..b60350230 100644
--- a/.build/jisonTransformer.ts
+++ b/.build/jisonTransformer.ts
@@ -1,6 +1,7 @@
import jison from 'jison';
export const transformJison = (src: string): string => {
+ // @ts-ignore - Jison is not typed properly
const parser = new jison.Generator(src, {
moduleType: 'js',
'token-stack': true,
diff --git a/.cspell/code-terms.txt b/.cspell/code-terms.txt
index 36d3b94c6..9d2f700fc 100644
--- a/.cspell/code-terms.txt
+++ b/.cspell/code-terms.txt
@@ -28,6 +28,7 @@ controly
CSSCLASS
CYLINDEREND
CYLINDERSTART
+DAGA
datakey
DEND
descr
@@ -90,6 +91,7 @@ reqs
rewritelinks
rgba
RIGHTOF
+roughjs
sankey
sequencenumber
shrc
@@ -109,6 +111,7 @@ strikethrough
stringifying
struct
STYLECLASS
+STYLEDEF
STYLEOPTS
subcomponent
subcomponents
diff --git a/.cspell/libraries.txt b/.cspell/libraries.txt
index 71d2e18a4..c185429b0 100644
--- a/.cspell/libraries.txt
+++ b/.cspell/libraries.txt
@@ -55,6 +55,7 @@ presetAttributify
pyplot
redmine
rehype
+roughjs
rscratch
shiki
sparkline
diff --git a/.cspell/mermaid-terms.txt b/.cspell/mermaid-terms.txt
index 3fa5eff26..46ad6dddb 100644
--- a/.cspell/mermaid-terms.txt
+++ b/.cspell/mermaid-terms.txt
@@ -9,6 +9,7 @@ elems
gantt
gitgraph
gzipped
+handDrawn
knsv
Knut
marginx
@@ -17,6 +18,7 @@ Markdownish
mermaidjs
mindmap
mindmaps
+mrtree
multigraph
nodesep
NOTEGROUP
diff --git a/.cspell/misc-terms.txt b/.cspell/misc-terms.txt
index 0efd1dcc0..3fc094309 100644
--- a/.cspell/misc-terms.txt
+++ b/.cspell/misc-terms.txt
@@ -1,4 +1,6 @@
BRANDES
-handdrawn
+circo
+handDrawn
KOEPF
+neato
newbranch
diff --git a/.esbuild/build.ts b/.esbuild/build.ts
index 505c18405..2bb42a557 100644
--- a/.esbuild/build.ts
+++ b/.esbuild/build.ts
@@ -8,8 +8,8 @@ import { defaultOptions, getBuildConfig } from './util.js';
const shouldVisualize = process.argv.includes('--visualize');
const buildPackage = async (entryName: keyof typeof packageOptions) => {
- const commonOptions = { ...defaultOptions, entryName } as const;
- const buildConfigs = [
+ const commonOptions: MermaidBuildOptions = { ...defaultOptions, entryName } as const;
+ const buildConfigs: MermaidBuildOptions[] = [
// package.mjs
{ ...commonOptions },
// package.min.mjs
diff --git a/.esbuild/util.ts b/.esbuild/util.ts
index 6d424ab17..522176113 100644
--- a/.esbuild/util.ts
+++ b/.esbuild/util.ts
@@ -8,7 +8,7 @@ import { jisonPlugin } from './jisonPlugin.js';
const __dirname = fileURLToPath(new URL('.', import.meta.url));
-export interface MermaidBuildOptions {
+export interface MermaidBuildOptions extends BuildOptions {
minify: boolean;
core: boolean;
metafile: boolean;
diff --git a/.gitignore b/.gitignore
index 7948faee4..7448f2a81 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,7 +35,7 @@ cypress/snapshots/
.tsbuildinfo
tsconfig.tsbuildinfo
-knsv*.html
+#knsv*.html
local*.html
stats/
diff --git a/.prettierignore b/.prettierignore
index 7da0646e3..c70080426 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -16,3 +16,5 @@ generated/
# Ignore the files creates in /demos/dev except for example.html
demos/dev/**
!/demos/dev/example.html
+# TODO: Lots of errors to fix
+cypress/platform/state-refactor.html
diff --git a/cypress/integration/other/flowchart-elk.spec.js b/cypress/integration/other/flowchart-elk.spec.js
deleted file mode 100644
index 22a6efc0f..000000000
--- a/cypress/integration/other/flowchart-elk.spec.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { urlSnapshotTest, openURLAndVerifyRendering } from '../../helpers/util.ts';
-
-describe('Flowchart elk', () => {
- it('should use dagre as fallback', () => {
- urlSnapshotTest('http://localhost:9000/flow-elk.html', {
- name: 'flow-elk fallback to dagre',
- });
- });
- it('should allow overriding with external package', () => {
- urlSnapshotTest('http://localhost:9000/flow-elk.html?elk=true', {
- name: 'flow-elk overriding dagre with elk',
- });
- });
-});
diff --git a/cypress/integration/rendering/appli.spec.js b/cypress/integration/rendering/appli.spec.js
index 5def96815..51eeb657e 100644
--- a/cypress/integration/rendering/appli.spec.js
+++ b/cypress/integration/rendering/appli.spec.js
@@ -11,6 +11,27 @@ describe('Git Graph diagram', () => {
{}
);
});
+ it('Should render subgraphs with title margins and edge labels', () => {
+ imgSnapshotTest(
+ `flowchart LR
+
+ subgraph TOP
+ direction TB
+ subgraph B1
+ direction RL
+ i1 --lb1-->f1
+ end
+ subgraph B2
+ direction BT
+ i2 --lb2-->f2
+ end
+ end
+ A --lb3--> TOP --lb4--> B
+ B1 --lb5--> B2
+ `,
+ { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+ );
+ });
// it(`ultraFastTest`, function () {
// // Navigate to the url we want to test
// // ⭐️ Note to see visual bugs, run the test using the above URL for the 1st run.
diff --git a/cypress/integration/rendering/block.spec.js b/cypress/integration/rendering/block.spec.js
index 9d62c642d..f5d5103e8 100644
--- a/cypress/integration/rendering/block.spec.js
+++ b/cypress/integration/rendering/block.spec.js
@@ -236,7 +236,7 @@ describe('Block diagram', () => {
);
});
- it('BL16: width alignment - blocks shold be equal in width', () => {
+ it('BL17: width alignment - blocks shold be equal in width', () => {
imgSnapshotTest(
`block-beta
A("This is the text")
@@ -247,7 +247,7 @@ describe('Block diagram', () => {
);
});
- it('BL17: block types 1 - square, rounded and circle', () => {
+ it('BL18: block types 1 - square, rounded and circle', () => {
imgSnapshotTest(
`block-beta
A["square"]
@@ -258,7 +258,7 @@ describe('Block diagram', () => {
);
});
- it('BL18: block types 2 - odd, diamond and hexagon', () => {
+ it('BL19: block types 2 - odd, diamond and hexagon', () => {
imgSnapshotTest(
`block-beta
A>"rect_left_inv_arrow"]
@@ -269,7 +269,7 @@ describe('Block diagram', () => {
);
});
- it('BL19: block types 3 - stadium', () => {
+ it('BL20: block types 3 - stadium', () => {
imgSnapshotTest(
`block-beta
A(["stadium"])
@@ -278,7 +278,7 @@ describe('Block diagram', () => {
);
});
- it('BL20: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
+ it('BL21: block types 4 - lean right, lean left, trapezoid and inv trapezoid', () => {
imgSnapshotTest(
`block-beta
A[/"lean right"/]
@@ -290,7 +290,7 @@ describe('Block diagram', () => {
);
});
- it('BL21: block types 1 - square, rounded and circle', () => {
+ it('BL22: block types 1 - square, rounded and circle', () => {
imgSnapshotTest(
`block-beta
A["square"]
@@ -301,7 +301,7 @@ describe('Block diagram', () => {
);
});
- it('BL22: sizing - it should be possible to make a block wider', () => {
+ it('BL23: sizing - it should be possible to make a block wider', () => {
imgSnapshotTest(
`block-beta
A("rounded"):2
@@ -312,7 +312,7 @@ describe('Block diagram', () => {
);
});
- it('BL23: sizing - it should be possible to make a composite block wider', () => {
+ it('BL24: sizing - it should be possible to make a composite block wider', () => {
imgSnapshotTest(
`block-beta
block:2
@@ -324,7 +324,7 @@ describe('Block diagram', () => {
);
});
- it('BL24: block in the middle with space on each side', () => {
+ it('BL25: block in the middle with space on each side', () => {
imgSnapshotTest(
`block-beta
columns 3
@@ -335,7 +335,7 @@ describe('Block diagram', () => {
{}
);
});
- it('BL25: space and an edge', () => {
+ it('BL26: space and an edge', () => {
imgSnapshotTest(
`block-beta
columns 5
@@ -345,7 +345,7 @@ describe('Block diagram', () => {
{}
);
});
- it('BL26: block sizes for regular blocks', () => {
+ it('BL27: block sizes for regular blocks', () => {
imgSnapshotTest(
`block-beta
columns 3
@@ -354,7 +354,7 @@ describe('Block diagram', () => {
{}
);
});
- it('BL27: composite block with a set width - f should use the available space', () => {
+ it('BL28: composite block with a set width - f should use the available space', () => {
imgSnapshotTest(
`block-beta
columns 3
@@ -363,11 +363,12 @@ describe('Block diagram', () => {
f
end
g
- `,
+ `,
{}
);
});
- it('BL23: composite block with a set width - f and g should split the available space', () => {
+
+ it('BL29: composite block with a set width - f and g should split the available space', () => {
imgSnapshotTest(
`block-beta
columns 3
@@ -379,7 +380,7 @@ describe('Block diagram', () => {
h
i
j
- `,
+ `,
{}
);
});
diff --git a/cypress/integration/rendering/c4.spec.js b/cypress/integration/rendering/c4.spec.js
index f699bd429..00e71adec 100644
--- a/cypress/integration/rendering/c4.spec.js
+++ b/cypress/integration/rendering/c4.spec.js
@@ -1,7 +1,7 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('C4 diagram', () => {
- it('should render a simple C4Context diagram', () => {
+ it('C4.1 should render a simple C4Context diagram', () => {
imgSnapshotTest(
`
C4Context
@@ -31,7 +31,7 @@ describe('C4 diagram', () => {
{}
);
});
- it('should render a simple C4Container diagram', () => {
+ it('C4.2 should render a simple C4Container diagram', () => {
imgSnapshotTest(
`
C4Container
@@ -50,7 +50,7 @@ describe('C4 diagram', () => {
{}
);
});
- it('should render a simple C4Component diagram', () => {
+ it('C4.3 should render a simple C4Component diagram', () => {
imgSnapshotTest(
`
C4Component
@@ -68,7 +68,7 @@ describe('C4 diagram', () => {
{}
);
});
- it('should render a simple C4Dynamic diagram', () => {
+ it('C4.4 should render a simple C4Dynamic diagram', () => {
imgSnapshotTest(
`
C4Dynamic
@@ -91,7 +91,7 @@ describe('C4 diagram', () => {
{}
);
});
- it('should render a simple C4Deployment diagram', () => {
+ it('C4.5 should render a simple C4Deployment diagram', () => {
imgSnapshotTest(
`
C4Deployment
diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index 20a1aea0a..258f8529f 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -76,7 +76,7 @@ describe('Class diagram V2', () => {
);
});
- it('should render a simple class diagram with different visibilities', () => {
+ it('2.1 should render a simple class diagram with different visibilities', () => {
imgSnapshotTest(
`
classDiagram-v2
@@ -93,7 +93,7 @@ describe('Class diagram V2', () => {
);
});
- it('should render multiple class diagrams', () => {
+ it('3: should render multiple class diagrams', () => {
imgSnapshotTest(
[
`
diff --git a/cypress/integration/rendering/errorDiagram.spec.js b/cypress/integration/rendering/errorDiagram.spec.js
index e837565d3..9eeb2e310 100644
--- a/cypress/integration/rendering/errorDiagram.spec.js
+++ b/cypress/integration/rendering/errorDiagram.spec.js
@@ -3,7 +3,7 @@ import { imgSnapshotTest } from '../../helpers/util';
describe('Error Diagrams', () => {
beforeEach(() => {
cy.on('uncaught:exception', (err) => {
- expect(err.message).to.include('Parse error');
+ expect(err.message).to.include('error');
// return false to prevent the error from
// failing this test
return false;
diff --git a/cypress/integration/rendering/flowchart-elk.spec.js b/cypress/integration/rendering/flowchart-elk.spec.js
index e931025e9..b5caef973 100644
--- a/cypress/integration/rendering/flowchart-elk.spec.js
+++ b/cypress/integration/rendering/flowchart-elk.spec.js
@@ -837,6 +837,26 @@ subgraph "\`**Two**\`"
in the hat\`") -- "\`1o **ipa**\`" --> d("The dog in the hog")
end
+`,
+ { flowchart: { titleTopMargin: 0 } }
+ );
+ });
+ it('Sub graphs and markdown strings', () => {
+ imgSnapshotTest(
+ `---
+config:
+ layout: elk
+---
+
+flowchart LR
+ subgraph subgraph_ko6czgs5u["Untitled subgraph"]
+ D["Option 1"]
+ end
+ C{"Evaluate"} -- One --> D
+ C -- Two --> E(("Option 2"))
+ D --> E
+ A["A"]
+
`,
{ flowchart: { titleTopMargin: 0 } }
);
@@ -855,7 +875,7 @@ describe('Title and arrow styling #4813', () => {
flowchart LR
A-->B
A-->C`,
- { flowchart: { defaultRenderer: 'elk' } }
+ { layout: 'elk' }
);
cy.get('svg').should((svg) => {
const title = svg[0].querySelector('text');
@@ -871,15 +891,14 @@ describe('Title and arrow styling #4813', () => {
B-.-oC
C==xD
D ~~~ A`,
- { flowchart: { defaultRenderer: 'elk' } }
+ { layout: 'elk' }
);
cy.get('svg').should((svg) => {
const edges = svg[0].querySelectorAll('.edges path');
- console.log(edges);
- expect(edges[0]).to.have.attr('pattern', 'solid');
- expect(edges[1]).to.have.attr('pattern', 'dotted');
- expect(edges[2]).to.have.css('stroke-width', '3.5px');
- expect(edges[3]).to.have.css('stroke-width', '1.5px');
+ expect(edges[0].getAttribute('class')).to.contain('edge-pattern-solid');
+ expect(edges[1].getAttribute('class')).to.contain('edge-pattern-dotted');
+ expect(edges[2].getAttribute('class')).to.contain('edge-thickness-thick');
+ expect(edges[3].getAttribute('class')).to.contain('edge-thickness-invisible');
});
});
});
diff --git a/cypress/integration/rendering/flowchart-handDrawn.spec.js b/cypress/integration/rendering/flowchart-handDrawn.spec.js
new file mode 100644
index 000000000..d2e3edde0
--- /dev/null
+++ b/cypress/integration/rendering/flowchart-handDrawn.spec.js
@@ -0,0 +1,1060 @@
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
+
+describe('Flowchart HandDrawn', () => {
+ it('FHD1: should render a simple flowchart no htmlLabels', () => {
+ imgSnapshotTest(
+ `graph TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me think}
+ C -->|One| D[Laptop]
+ C -->|Two| E[iPhone]
+ C -->|Three| F[fa:fa-car Car]
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ flowchart: { htmlLabels: false },
+ fontFamily: 'courier',
+ }
+ );
+ });
+
+ it('FHD2: should render a simple flowchart with htmlLabels', () => {
+ imgSnapshotTest(
+ `graph TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me think}
+ C -->|One| D[Laptop]
+ C -->|Two| E[iPhone]
+ C -->|Three| F[fa:fa-car Car]
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ flowchart: { htmlLabels: true },
+ fontFamily: 'courier',
+ }
+ );
+ });
+
+ it('FHD3: should render a simple flowchart with line breaks', () => {
+ imgSnapshotTest(
+ `
+ graph TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me thinksssssHaiya "]-->b
+ `,
+ { look: 'handDrawn', handDrawnSeed: 0, htmlLabels: false, flowchart: { htmlLabels: false } }
+ );
+ });
+ it('FDH37: should render non-escaped with html labels', () => {
+ imgSnapshotTest(
+ `graph TD
+ a["Haiya "]-->b
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ htmlLabels: true,
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
+ );
+ });
+ it('FDH38: should render a flowchart when useMaxWidth is true (default)', () => {
+ renderGraph(
+ `flowchart TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me think}
+ C -->|One| D[Laptop]
+ C -->|Two| E[iPhone]
+ C -->|Three| F[fa:fa-car Car]
+ `,
+ { look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: true } }
+ );
+ cy.get('svg').should((svg) => {
+ expect(svg).to.have.attr('width', '100%');
+ // expect(svg).to.have.attr('height');
+ // use within because the absolute value can be slightly different depending on the environment ±10%
+ // const height = parseFloat(svg.attr('height'));
+ // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+ const style = svg.attr('style');
+ expect(style).to.match(/^max-width: [\d.]+px;$/);
+ const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
+ expect(maxWidthValue).to.be.within(446 * 0.9, 446 * 1.1);
+ });
+ });
+ it('FDH39: should render a flowchart when useMaxWidth is false', () => {
+ renderGraph(
+ `graph TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me think}
+ C -->|One| D[Laptop]
+ C -->|Two| E[iPhone]
+ C -->|Three| F[fa:fa-car Car]
+ `,
+ { look: 'handDrawn', handDrawnSeed: 0, flowchart: { useMaxWidth: false } }
+ );
+ cy.get('svg').should((svg) => {
+ // const height = parseFloat(svg.attr('height'));
+ const width = parseFloat(svg.attr('width'));
+ // use within because the absolute value can be slightly different depending on the environment ±10%
+ // expect(height).to.be.within(446 * 0.95, 446 * 1.05);
+ expect(width).to.be.within(446 * 0.9, 446 * 1.1);
+ expect(svg).to.not.have.attr('style');
+ });
+ });
+ it('FDH40: handle styling with style expressions', () => {
+ imgSnapshotTest(
+ `
+ graph LR
+ id1(Start)-->id2(Stop)
+ style id1 fill:#f9f,stroke:#333,stroke-width:4px
+ style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ htmlLabels: true,
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
+ );
+ });
+ it('FDH41: handle styling for all node shapes', () => {
+ imgSnapshotTest(
+ `
+ graph LR
+ A[red text] -->|default style| B(blue text)
+ C([red text]) -->|default style| D[[blue text]]
+ E[(red text)] -->|default style| F((blue text))
+ G>red text] -->|default style| H{blue text}
+ I{{red text}} -->|default style| J[/blue text/]
+ linkStyle default color:Sienna;
+ style A stroke:#ff0000,fill:#ffcccc,color:#ff0000
+ style B stroke:#0000ff,fill:#ccccff,color:#0000ff
+ style C stroke:#ff0000,fill:#ffcccc,color:#ff0000
+ style D stroke:#0000ff,fill:#ccccff,color:#0000ff
+ style E stroke:#ff0000,fill:#ffcccc,color:#ff0000
+ style F stroke:#0000ff,fill:#ccccff,color:#0000ff
+ style G stroke:#ff0000,fill:#ffcccc,color:#ff0000
+ style H stroke:#0000ff,fill:#ccccff,color:#0000ff
+ style I stroke:#ff0000,fill:#ffcccc,color:#ff0000
+ style J stroke:#0000ff,fill:#ccccff,color:#0000ff
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ htmlLabels: true,
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
+ );
+ });
+ it('FDH42: fontawesome icons in edge labels', () => {
+ imgSnapshotTest(
+ `
+graph TD
+ C -->|fa:fa-car Car| F[fa:fa-car Car]
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ htmlLabels: true,
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
+ );
+ });
+ it('FDH43: fontawesome icons in edge labels', () => {
+ imgSnapshotTest(
+ `
+ graph TB
+ subgraph bar[Bar]
+ F
+ end
+ style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ htmlLabels: true,
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
+ );
+ });
+ it('FDH44: fontawesome icons in edge labels', () => {
+ imgSnapshotTest(
+ `
+ graph TB
+ A
+ B
+ subgraph foo[Foo SubGraph]
+ C
+ D
+ end
+ subgraph bar[Bar SubGraph]
+ E
+ F
+ end
+ G
+
+ A-->B
+ B-->C
+ C-->D
+ B-->D
+ D-->E
+ E-->A
+ E-->F
+ F-->D
+ F-->G
+ B-->G
+ G-->D
+
+ style foo fill:#F99,stroke-width:2px,stroke:#F0F,color:darkred
+ style bar fill:#999,stroke-width:10px,stroke:#0F0,color:blue
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ htmlLabels: true,
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
+ );
+ });
+ it('FDH45: fontawesome icons in edge labels', () => {
+ imgSnapshotTest(
+ `
+ %%{init:{"theme":"base", "themeVariables": {"primaryColor":"#411d4e", "titleColor":"white", "darkMode":true}}}%%
+ flowchart LR
+ subgraph A
+ a --> b
+ end
+ subgraph B
+ i -->f
+ end
+ A --> B
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ htmlLabels: true,
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
+ );
+ });
+ it('FDH46: text-color from classes', () => {
+ imgSnapshotTest(
+ `
+ flowchart LR
+ classDef dark fill:#000,stroke:#000,stroke-width:4px,color:#fff
+ Lorem --> Ipsum --> Dolor
+ class Lorem,Dolor dark
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ htmlLabels: true,
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
+ );
+ });
+ it('FDH47: apply class called default on node called default', () => {
+ imgSnapshotTest(
+ `
+ graph TD
+ classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
+ hello --> default
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ htmlLabels: true,
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
+ );
+ });
+
+ it('FDH48: should be able to style default node independently', () => {
+ imgSnapshotTest(
+ `
+ flowchart TD
+ classDef default fill:#a34
+ hello --> default
+
+ style default stroke:#000,stroke-width:4px
+ `,
+ {
+ look: 'handDrawn',
+ handDrawnSeed: 0,
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
+ );
+ });
+});
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index 3eb2a0432..c2fd0b011 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/cypress/integration/rendering/flowchart-v2.spec.js
@@ -99,7 +99,7 @@ describe('Flowchart v2', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- expect(maxWidthValue).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+ expect(maxWidthValue).to.be.within(446 * 0.95 - 1, 446 * 1.05);
});
});
it('8: should render a flowchart when useMaxWidth is false', () => {
@@ -118,7 +118,7 @@ describe('Flowchart v2', () => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±5%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
- expect(width).to.be.within(290 * 0.95 - 1, 290 * 1.05);
+ expect(width).to.be.within(446 * 0.95 - 1, 446 * 1.05);
expect(svg).to.not.have.attr('style');
});
});
@@ -1047,7 +1047,9 @@ end
A --lb3--> TOP --lb4--> B
B1 --lb5--> B2
`,
- { flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } } }
+ {
+ flowchart: { subGraphTitleMargin: { top: 10, bottom: 5 } },
+ }
);
});
});
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index e4766e792..d3a83ae5f 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/cypress/integration/rendering/flowchart.spec.js
@@ -733,7 +733,7 @@ describe('Graph', () => {
});
it('38: should render a flowchart when useMaxWidth is true (default)', () => {
renderGraph(
- `graph TD
+ `flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D[Laptop]
@@ -751,7 +751,7 @@ describe('Graph', () => {
const style = svg.attr('style');
expect(style).to.match(/^max-width: [\d.]+px;$/);
const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));
- expect(maxWidthValue).to.be.within(300 * 0.9, 300 * 1.1);
+ expect(maxWidthValue).to.be.within(446 * 0.9, 446 * 1.1);
});
});
it('39: should render a flowchart when useMaxWidth is false', () => {
@@ -770,7 +770,7 @@ describe('Graph', () => {
const width = parseFloat(svg.attr('width'));
// use within because the absolute value can be slightly different depending on the environment ±10%
// expect(height).to.be.within(446 * 0.95, 446 * 1.05);
- expect(width).to.be.within(300 * 0.9, 300 * 1.1);
+ expect(width).to.be.within(446 * 0.9, 446 * 1.1);
expect(svg).to.not.have.attr('style');
});
});
@@ -905,13 +905,16 @@ graph TD
it('67: should be able to style default node independently', () => {
imgSnapshotTest(
`
- flowchart TD
+ flowchart TD
classDef default fill:#a34
hello --> default
style default stroke:#000,stroke-width:4px
`,
- { htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
+ {
+ flowchart: { htmlLabels: true },
+ securityLevel: 'loose',
+ }
);
});
});
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index cb40aa8dc..606a1a3f5 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/cypress/integration/rendering/stateDiagram-v2.spec.js
@@ -542,6 +542,43 @@ stateDiagram-v2
{ logLevel: 0, fontFamily: 'courier' }
);
});
+ it(' can have styles applied ', () => {
+ imgSnapshotTest(
+ `
+stateDiagram-v2
+AState
+style AState fill:#636,border:1px solid red,color:white;
+ `,
+ { logLevel: 0, fontFamily: 'courier' }
+ );
+ });
+ it(' should let styles take preceedence over classes', () => {
+ imgSnapshotTest(
+ `
+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;
+ `,
+ { logLevel: 0, fontFamily: 'courier' }
+ );
+ });
+ it(' should allow styles to take effect in stubgraphs', () => {
+ imgSnapshotTest(
+ `
+ stateDiagram
+ state roundWithTitle {
+ C: Black with white text
+ }
+ D: Black with white text
+
+ style C,D stroke:#00f, fill:black, color:white
+ `,
+ { logLevel: 0, fontFamily: 'courier' }
+ );
+ });
});
it('1433: should render a simple state diagram with a title', () => {
imgSnapshotTest(
@@ -551,6 +588,20 @@ title: simple state diagram
stateDiagram-v2
[*] --> State1
State1 --> [*]
+`,
+ {}
+ );
+ });
+ it('should align dividers correctly', () => {
+ imgSnapshotTest(
+ `stateDiagram-v2
+ state s2 {
+ s3
+ --
+ s4
+ --
+ 55
+ }
`,
{}
);
diff --git a/cypress/platform/flowchart-refactor.html b/cypress/platform/flowchart-refactor.html
new file mode 100644
index 000000000..034e79a52
--- /dev/null
+++ b/cypress/platform/flowchart-refactor.html
@@ -0,0 +1,866 @@
+
+
+
+
+ Dagre
+ Dagre with rough
+ ELK
+ ELK with rough
+
+
+
+
+
+flowchart LR
+ id1([This is the text in the box])
+
+
+
+
+
+%%{init: {"look": "handDrawn"} }%%
+flowchart LR
+ id1([This is the text in the box])
+
+
+
+
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
+flowchart LR
+ id1([This is the text in the box])
+
+
+
+
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
+flowchart LR
+ id1([This is the text in the box])
+
+
+
+
+
+
+
+
+
+
+
+flowchart LR
+ id1[[This is the text in the box]]
+
+
+
+
+%%{init: {"look": "handDrawn"} }%%
+flowchart LR
+ id1[[This is the text in the box]]
+
+
+
+
+%%{init: {"handDrawn": false, "layout": "elk"} }%%
+flowchart LR
+ id1[[This is the text in the box]]
+
+
+
+
+%%{init: {"look": "handDrawn", "layout": "elk"} }%%
+flowchart LR
+ id1[[This is the text in the box]]
+
+
+
+
+
+
+
+
+
+
+
+ flowchart LR
+ id1[(Database)]
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1[(Database)]
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1[(Database)]
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1[(Database)]
+
+
+
+
+
+
+
+
+
+
+
+ flowchart LR
+ id1((This is the text in the circle))
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1((This is the text in the circle))
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1((This is the text in the circle))
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1((This is the text in the circle))
+
+
+
+
+
+
+
+
+
+
+
+ flowchart TD
+ id1(((This is the text in the circle)))
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart TD
+ id1(((This is the text in the circle)))
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart TD
+ id1(((This is the text in the circle)))
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart TD
+ id1(((This is the text in the circle)))
+
+
+
+
+
+
+
+
+
+
+
+ flowchart LR
+ id1>This is the text in the box]
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1>This is the text in the box]
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1>This is the text in the box]
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1>This is the text in the box]
+
+
+
+
+
+
+
+
+
+
+
+ flowchart LR
+ id1{This is the text in the box}
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1{This is the text in the box}
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1{This is the text in the box}
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1{This is the text in the box}
+
+
+
+
+
+
+
+
+
+
+
+ flowchart LR
+ id1{{This is the text in the box}}
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1{{This is the text in the box}}
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1{{This is the text in the box}}
+
+
+
+
+
+
+
+
+
+
+
+ flowchart TD
+ id1[/This is the text in the box/]
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart TD
+ id1[/This is the text in the box/]
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart TD
+ id1[/This is the text in the box/]
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart TD
+ id1[/This is the text in the box/]
+
+
+
+
+
+
+
+
+
+
+
+ flowchart TD
+ id1[\This is the text in the box\]
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart TD
+ id1[\This is the text in the box\]
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart TD
+ id1[\This is the text in the box\]
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart TD
+ id1[\This is the text in the box\]
+
+
+
+
+
+
+
+
+
+
+
+
+ flowchart TD
+ A[/Christmas\]
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart TD
+ A[/Christmas\]
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart TD
+ A[/Christmas\]
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart TD
+ A[/Christmas\]
+
+
+
+
+
+
+
+
+
+
+
+ flowchart TD
+ A[\Christmas/]
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart TD
+ A[\Christmas/]
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart TD
+ A[\Christmas/]
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart TD
+ A[\Christmas/]
+
+
+
+
+
+
+
+
+
+
+
+ flowchart LR
+ id1(This is the text in the box)
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1(This is the text in the box)
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1(This is the text in the box)
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1(This is the text in the box)
+
+
+
+
+
+
+
+
+
+
+
+ flowchart LR
+ id1[This is the text in the box]
+
+
+
+
+ %%{init: {"look": "handDrawn"} }%%
+ flowchart LR
+ id1[This is the text in the box]
+
+
+
+
+ %%{init: {"handDrawn": false, "layout": "elk"} }%%
+ flowchart LR
+ id1[This is the text in the box]
+
+
+
+
+ %%{init: {"look": "handDrawn", "layout": "elk"} }%%
+ flowchart LR
+ id1[This is the text in the box]
+
+
+
+
+
+
+
+
+
+
+
diff --git a/cypress/platform/flowchart-sate.html b/cypress/platform/flowchart-sate.html
new file mode 100644
index 000000000..37cf4a828
--- /dev/null
+++ b/cypress/platform/flowchart-sate.html
@@ -0,0 +1,191 @@
+
+
+
+
+ State rough
+ Flowchart rough
+
+
+
+
+
+%%{init: {"look": "handDrawn"} }%%
+stateDiagram-v2
+ stateA
+
+
+
+
+
+%%{init: {"look": "handDrawn"} }%%
+flowchart LR
+ id1[[This is the text in the box]]
+
+
+
+
+
+
+
+
+
+
diff --git a/cypress/platform/knsv-4442.html b/cypress/platform/knsv-4442.html
new file mode 100644
index 000000000..fc15a1685
--- /dev/null
+++ b/cypress/platform/knsv-4442.html
@@ -0,0 +1,433 @@
+
+
+
+stateDiagram-v2
+ [*] --> Still
+ Still --> [*]
+ Still --> Moving
+ Moving --> Still
+ Moving --> Crash
+ Crash --> [*]
+
+flowchart RL
+ subgraph "`one`"
+ a1 -- l1 --> a2
+ a1 -- l2 --> a2
+ end
+
+
+flowchart RL
+ subgraph "`one`"
+ a1 -- l1 --> a2
+ a1 -- l2 --> a2
+ end
+
+
+flowchart
+id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]
+
+flowchart LR
+ A[A text that needs to be wrapped wraps to another line]
+ B[A text that needs to be
+
+flowchart LR
+ C["`A text
+ that needs
+ to be wrapped
+ in another
+ way`"]
+
+
+ classDiagram-v2
+ note "I love this diagram!\nDo you love it?"
+
+
+ stateDiagram-v2
+ State1: The state with a note with minus - and plus + in it
+ note left of State1
+ Important information! You can write
+ notes with . and in them.
+ end note
+
+mindmap
+root
+ Child3(A node with an icon and with a long text that wraps to keep the node size in check)
+
+
+ %%{init: {"theme": "forest"} }%%
+mindmap
+ id1[**Start2**
+
+mindmap
+ id1["`**Start2**
+ second line 😎 with long text that is wrapping to the next line`"]
+ id2["`Child **with bold** text`"]
+ id3["`Children of which some
+ is using *italic type of* text`"]
+ id4[Child]
+ id5["`Child
+ Row
+ and another
+ `"]
+
+
+mindmap
+ id1("`**Root**`"]
+ id2["`A formatted text... with **bold** and *italics*`"]
+ id3[Regular labels works as usual]
+ id4["`Emojis and unicode works too: 🤓
+ शान्तिः سلام 和平 `"]
+
+
+
+%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
+flowchart TB
+ %% I could not figure out how to use double quotes in labels in Mermaid
+ subgraph ibm[IBM Espresso CPU]
+ core0[IBM PowerPC Broadway Core 0]
+ core1[IBM PowerPC Broadway Core 1]
+ core2[IBM PowerPC Broadway Core 2]
+
+ rom[16 KB ROM]
+
+ core0 --- core2
+
+ rom --> core2
+ end
+
+ subgraph amd["`**AMD** Latte GPU`"]
+ mem[Memory & I/O Bridge]
+ dram[DRAM Controller]
+ edram[32 MB EDRAM MEM1]
+ rom[512 B SEEPROM]
+
+ sata[SATA IF]
+ exi[EXI]
+
+ subgraph gx[GX]
+ sram[3 MB 1T-SRAM]
+ end
+
+ radeon[AMD Radeon R7xx GX2]
+
+ mem --- gx
+ mem --- radeon
+
+ rom --- mem
+
+ mem --- sata
+ mem --- exi
+
+ dram --- sata
+ dram --- exi
+ end
+
+ ddr3[2 GB DDR3 RAM MEM2]
+
+ mem --- ddr3
+ dram --- ddr3
+ edram --- ddr3
+
+ core1 --- mem
+
+ exi --- rtc
+ rtc{{rtc}}
+
+
+%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
+flowchart TB
+ %% I could not figure out how to use double quotes in labels in Mermaid
+ subgraph ibm[IBM Espresso CPU]
+ core0[IBM PowerPC Broadway Core 0]
+ core1[IBM PowerPC Broadway Core 1]
+ core2[IBM PowerPC Broadway Core 2]
+
+ rom[16 KB ROM]
+
+ core0 --- core2
+
+ rom --> core2
+ end
+
+ subgraph amd["`**AMD** Latte GPU`"]
+ mem[Memory & I/O Bridge]
+ dram[DRAM Controller]
+ edram[32 MB EDRAM MEM1]
+ rom[512 B SEEPROM]
+
+ sata[SATA IF]
+ exi[EXI]
+
+ subgraph gx[GX]
+ sram[3 MB 1T-SRAM]
+ end
+
+ radeon[AMD Radeon R7xx GX2]
+
+ mem --- gx
+ mem --- radeon
+
+ rom --- mem
+
+ mem --- sata
+ mem --- exi
+
+ dram --- sata
+ dram --- exi
+ end
+
+ ddr3[2 GB DDR3 RAM MEM2]
+
+ mem --- ddr3
+ dram --- ddr3
+ edram --- ddr3
+
+ core1 --- mem
+
+ exi --- rtc
+ rtc{{rtc}}
+
+
+
+flowchart TB
+ %% I could not figure out how to use double quotes in labels in Mermaid
+ subgraph ibm[IBM Espresso CPU]
+ core0[IBM PowerPC Broadway Core 0]
+ core1[IBM PowerPC Broadway Core 1]
+ core2[IBM PowerPC Broadway Core 2]
+
+ rom[16 KB ROM]
+
+ core0 --- core2
+
+ rom --> core2
+ end
+
+ subgraph amd[AMD Latte GPU]
+ mem[Memory & I/O Bridge]
+ dram[DRAM Controller]
+ edram[32 MB EDRAM MEM1]
+ rom[512 B SEEPROM]
+
+ sata[SATA IF]
+ exi[EXI]
+
+ subgraph gx[GX]
+ sram[3 MB 1T-SRAM]
+ end
+
+ radeon[AMD Radeon R7xx GX2]
+
+ mem --- gx
+ mem --- radeon
+
+ rom --- mem
+
+ mem --- sata
+ mem --- exi
+
+ dram --- sata
+ dram --- exi
+ end
+
+ ddr3[2 GB DDR3 RAM MEM2]
+
+ mem --- ddr3
+ dram --- ddr3
+ edram --- ddr3
+
+ core1 --- mem
+
+ exi --- rtc
+ rtc{{rtc}}
+
+
+ flowchart LR
+ B1 --be be--x B2
+ B1 --bo bo--o B3
+ subgraph Ugge
+ B2
+ B3
+ subgraph inner
+ B4
+ B5
+ end
+ subgraph inner2
+ subgraph deeper
+ C4
+ C5
+ end
+ C6
+ end
+
+ B4 --> C4
+
+ B3 -- X --> B4
+ B2 --> inner
+
+ C4 --> C5
+ end
+
+ subgraph outer
+ B6
+ end
+ B6 --> B5
+
+
+sequenceDiagram
+ Customer->>+Stripe: Makes a payment request
+ Stripe->>+Bank: Forwards the payment request to the bank
+ Bank->>+Customer: Asks for authorization
+ Customer->>+Bank: Provides authorization
+ Bank->>+Stripe: Sends a response with payment details
+ Stripe->>+Merchant: Sends a notification of payment receipt
+ Merchant->>+Stripe: Confirms the payment
+ Stripe->>+Customer: Sends a confirmation of payment
+ Customer->>+Merchant: Receives goods or services
+
+
+mindmap
+ root((mindmap))
+ Origins
+ Long history
+ ::icon(fa fa-book)
+ Popularisation
+ British popular psychology author Tony Buzan
+ Research
+ On effectiveness
+
+ example-diagram
+
+
+
+
+
+
+
+
+
+ // import mindmap from '../../packages/mermaid-mindmap/src/detector'; // import example from
+ '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs'; import mermaid
+ from './mermaid.esm.mjs'; // await mermaid.registerExternalDiagrams([example]);
+ mermaid.parseError = function (err, hash) { // console.error('Mermaid error: ', err); };
+ mermaid.initialize({ // theme: 'forest', startOnLoad: true, logLevel: 0, flowchart: { //
+ defaultRenderer: 'elk', useMaxWidth: false, // htmlLabels: false, htmlLabels: true, }, //
+ htmlLabels: false, gantt: { useMaxWidth: false, }, useMaxWidth: false, }); function callback()
+ { alert('It worked'); } mermaid.parseError = function (err, hash) { console.error('In parse
+ error:'); console.error(err); }; // mermaid.test1('first_slow', 1200).then((r) =>
+ console.info(r)); // mermaid.test1('second_fast', 200).then((r) => console.info(r)); //
+ mermaid.test1('third_fast', 200).then((r) => console.info(r)); // mermaid.test1('forth_slow',
+ 1200).then((r) => console.info(r));
+
+
+
+
+
diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html
index b12a2e765..ab7d9f68d 100644
--- a/cypress/platform/knsv2.html
+++ b/cypress/platform/knsv2.html
@@ -4,7 +4,7 @@
- block-beta
- blockArrowId<["Label"]>(right)
- blockArrowId2<["Label"]>(left)
- blockArrowId3<["Label"]>(up)
- blockArrowId4<["Label"]>(down)
- blockArrowId5<["Label"]>(x)
- blockArrowId6<["Label"]>(y)
- blockArrowId6<["Label"]>(x, down)
-
-
-block-beta
- block:e:4
- columns 2
- f
- g
- end
-
-
-
-block-beta
- block:e:4
- columns 2
- f
- g
- h
- end
-
-
-
-block-beta
- columns 4
- a b c d
- block:e:4
- columns 2
- f
- g
- h
- end
- i:4
-
-
-
-flowchart LR
- X-- "y" -->z
-
-
-block-beta
-columns 5
- A space B
- A --x B
-
-
-block-beta
-columns 3
- a["A wide one"] b:2 c:2 d
-
-
-block-beta
- block:e
- f
- end
-
-
-block-beta
- columns 3
- a:3
- block:e:3
- f
- end
- g
-
-
-block-beta
- columns 3
- a:3
- block:e:3
- f
- g
- end
- h
- i
- j
-
-
-
-block-beta
-columns 3
- a b:2
- block:e:3
- f
- end
- g h i
-
-
-block-beta
-columns 3
- a b c
- e:3
- f g h
-
-
-block-beta
-columns 1
- db(("DB"))
- blockArrowId6<[" "]>(down)
- block:ID
- A
- B["A wide one in the middle"]
- C
- end
- space
- D
- ID --> D
- C --> D
- style B fill:#f9F,stroke:#333,stroke-width:4px
-
-
-block-beta
- columns 5
- A1:3
- A2:1
- A3
- B1 B2 B3:3
-
-
-block-beta
- block
- D
- E
- end
- db("This is the text in the box")
-
-
-block-beta
-
- block
- D
- end
- A["A: I am a wide one"]
-
-
-block-beta
- A["square"]
- B("rounded")
- C(("circle"))
-
-
-block-beta
- A>"rect_left_inv_arrow"]
- B{"diamond"}
- C{{"hexagon"}}
-
-
-block-beta
- A(["stadium"])
-
-
-block-beta
- %% A[["subroutine"]]
- %% B[("cylinder")]
- C>"surprise"]
-
-
-block-beta
- A[/"lean right"/]
- B[\"lean left"\]
- C[/"trapezoid"\]
- D[\"trapezoid"/]
-
-
-
+
+
+---
+config:
+ look: handDrawn
+ flowchart:
+ htmlLabels: false
+---
flowchart
- B
- style B fill:#f9F,stroke:#333,stroke-width:4px
-
-
-
- flowchart LR
- a1 -- apa --> b1
-
-
-
-flowchart RL
- subgraph "`one`"
- id
- end
-
-
-flowchart RL
- subgraph "`one`"
- a1 -- l1 --> a2
- a1 -- l2 --> a2
- end
-
-
+ A[I am a long text, where do I go??? handdrawn - false]
+
+
+---
+config:
+ look: handdrawn
+ flowchart:
+ htmlLabels: true
+---
flowchart
-id["`A root with a long text that wraps to keep the node size in check. A root with a long text that wraps to keep the node size in check`"]
-
+ A[I am a long text, where do I go??? handdrawn - true]
+
+
+
+---
+config:
+ flowchart:
+ htmlLabels: false
+---
+flowchart
+ A[I am a long text, where do I go??? classic - false]
+
+
+---
+config:
+ flowchart:
+ htmlLabels: true
+---
+flowchart
+ A[I am a long text, where do I go??? classic - true]
+
+
flowchart LR
- A[A text that needs to be wrapped wraps to another line]
- B[A text that needs to be
-
-flowchart LR
- C["`A text
- that needs
- to be wrapped
- in another
- way`"]
-
-
- classDiagram-v2
- note "I love this diagram!\nDo you love it?"
-
-
- stateDiagram-v2
- State1: The state with a note with minus - and plus + in it
- note left of State1
- Important information! You can write
- notes with . and in them.
- end note
-
-mindmap
-root
- Child3(A node with an icon and with a long text that wraps to keep the node size in check)
-
-
- %%{init: {"theme": "forest"} }%%
-mindmap
- id1[**Start2**
-
-mindmap
- id1["`**Start2**
- second line 😎 with long text that is wrapping to the next line`"]
- id2["`Child **with bold** text`"]
- id3["`Children of which some
- is using *italic type of* text`"]
- id4[Child]
- id5["`Child
- Row
- and another
- `"]
-
-
-mindmap
- id1("`**Root**`"]
- id2["`A formatted text... with **bold** and *italics*`"]
- id3[Regular labels works as usual]
- id4["`Emojis and unicode works too: 🤓
- शान्तिः سلام 和平 `"]
+ id1(Start)-->id2(Stop)
+ style id1 fill:#f9f,stroke:#333,stroke-width:4px
+ style id2 fill:#bbf,stroke:#f66,stroke-width:2px,color:#fff,stroke-dasharray: 5 5
+
-
-%%{init: {"flowchart": {"defaultRenderer": "elk"}} }%%
-flowchart TB
- %% I could not figure out how to use double quotes in labels in Mermaid
- subgraph ibm[IBM Espresso CPU]
- core0[IBM PowerPC Broadway Core 0]
- core1[IBM PowerPC Broadway Core 1]
- core2[IBM PowerPC Broadway Core 2]
- rom[16 KB ROM]
-
- core0 --- core2
-
- rom --> core2
- end
-
- subgraph amd["`**AMD** Latte GPU`"]
- mem[Memory & I/O Bridge]
- dram[DRAM Controller]
- edram[32 MB EDRAM MEM1]
- rom[512 B SEEPROM]
-
- sata[SATA IF]
- exi[EXI]
-
- subgraph gx[GX]
- sram[3 MB 1T-SRAM]
- end
-
- radeon[AMD Radeon R7xx GX2]
-
- mem --- gx
- mem --- radeon
-
- rom --- mem
-
- mem --- sata
- mem --- exi
-
- dram --- sata
- dram --- exi
- end
-
- ddr3[2 GB DDR3 RAM MEM2]
-
- mem --- ddr3
- dram --- ddr3
- edram --- ddr3
-
- core1 --- mem
-
- exi --- rtc
- rtc{{rtc}}
-
-
-%%{init: {"flowchart": {"defaultRenderer": "elk", "htmlLabels": false}} }%%
-flowchart TB
- %% I could not figure out how to use double quotes in labels in Mermaid
- subgraph ibm[IBM Espresso CPU]
- core0[IBM PowerPC Broadway Core 0]
- core1[IBM PowerPC Broadway Core 1]
- core2[IBM PowerPC Broadway Core 2]
-
- rom[16 KB ROM]
-
- core0 --- core2
-
- rom --> core2
- end
-
- subgraph amd["`**AMD** Latte GPU`"]
- mem[Memory & I/O Bridge]
- dram[DRAM Controller]
- edram[32 MB EDRAM MEM1]
- rom[512 B SEEPROM]
-
- sata[SATA IF]
- exi[EXI]
-
- subgraph gx[GX]
- sram[3 MB 1T-SRAM]
- end
-
- radeon[AMD Radeon R7xx GX2]
-
- mem --- gx
- mem --- radeon
-
- rom --- mem
-
- mem --- sata
- mem --- exi
-
- dram --- sata
- dram --- exi
- end
-
- ddr3[2 GB DDR3 RAM MEM2]
-
- mem --- ddr3
- dram --- ddr3
- edram --- ddr3
-
- core1 --- mem
-
- exi --- rtc
- rtc{{rtc}}
-
-
-
-flowchart TB
- %% I could not figure out how to use double quotes in labels in Mermaid
- subgraph ibm[IBM Espresso CPU]
- core0[IBM PowerPC Broadway Core 0]
- core1[IBM PowerPC Broadway Core 1]
- core2[IBM PowerPC Broadway Core 2]
-
- rom[16 KB ROM]
-
- core0 --- core2
-
- rom --> core2
- end
-
- subgraph amd[AMD Latte GPU]
- mem[Memory & I/O Bridge]
- dram[DRAM Controller]
- edram[32 MB EDRAM MEM1]
- rom[512 B SEEPROM]
-
- sata[SATA IF]
- exi[EXI]
-
- subgraph gx[GX]
- sram[3 MB 1T-SRAM]
- end
-
- radeon[AMD Radeon R7xx GX2]
-
- mem --- gx
- mem --- radeon
-
- rom --- mem
-
- mem --- sata
- mem --- exi
-
- dram --- sata
- dram --- exi
- end
-
- ddr3[2 GB DDR3 RAM MEM2]
-
- mem --- ddr3
- dram --- ddr3
- edram --- ddr3
-
- core1 --- mem
-
- exi --- rtc
- rtc{{rtc}}
-
-
+
flowchart LR
- B1 --be be--x B2
- B1 --bo bo--o B3
- subgraph Ugge
- B2
- B3
- subgraph inner
- B4
- B5
- end
- subgraph inner2
- subgraph deeper
- C4
- C5
- end
- C6
- end
+ A:::foo & B:::bar --> C:::foobar
+ classDef foo stroke:#f00
+ classDef bar stroke:#0f0
+ classDef ash color:red
+ class C ash
+ style C stroke:#00f, fill:black
- B4 --> C4
-
- B3 -- X --> B4
- B2 --> inner
-
- C4 --> C5
- end
-
- subgraph outer
- B6
- end
- B6 --> B5
-
-
-sequenceDiagram
- Customer->>+Stripe: Makes a payment request
- Stripe->>+Bank: Forwards the payment request to the bank
- Bank->>+Customer: Asks for authorization
- Customer->>+Bank: Provides authorization
- Bank->>+Stripe: Sends a response with payment details
- Stripe->>+Merchant: Sends a notification of payment receipt
- Merchant->>+Stripe: Confirms the payment
- Stripe->>+Customer: Sends a confirmation of payment
- Customer->>+Merchant: Receives goods or services
-
-
-mindmap
- root((mindmap))
- Origins
- Long history
- ::icon(fa fa-book)
- Popularisation
- British popular psychology author Tony Buzan
- Research
- On effectiveness
-
- example-diagram
-
-
-
-
-
+
+ stateDiagram
+ A:::foo
+ B:::bar --> C:::foobar
+ classDef foo stroke:#f00
+ classDef bar stroke:#0f0
+ style C stroke:#00f, fill:black, color:white
+
+