mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-03 20:34:20 +01:00
377 lines
14 KiB
HTML
377 lines
14 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<title>Mermaid Quick Test Page</title>
|
|
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
|
<style>
|
|
div.mermaid {
|
|
font-family: 'Courier New', Courier, monospace !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: tidy-tree
|
|
---
|
|
mindmap
|
|
root((mindmap))
|
|
A
|
|
B
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: dagre
|
|
---
|
|
mindmap
|
|
root((mindmap))
|
|
A
|
|
B
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: elk
|
|
---
|
|
mindmap
|
|
root((mindmap))
|
|
A
|
|
B
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: cose-bilkent
|
|
---
|
|
mindmap
|
|
root((mindmap))
|
|
A
|
|
B
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: tidy-tree
|
|
---
|
|
mindmap
|
|
root((mindmap is a long thing))
|
|
A
|
|
B
|
|
C
|
|
D
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: dagre
|
|
---
|
|
mindmap
|
|
root((mindmap is a long thing))
|
|
A
|
|
B
|
|
C
|
|
D
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: elk
|
|
---
|
|
mindmap
|
|
root((mindmap is a long thing))
|
|
A
|
|
B
|
|
C
|
|
D
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: cose-bilkent
|
|
---
|
|
mindmap
|
|
root((mindmap is a long thing))
|
|
A
|
|
B
|
|
C
|
|
D
|
|
</pre>
|
|
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: tidy-tree
|
|
---
|
|
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
|
|
id)I am a cloud(
|
|
id))I am a bang((
|
|
Tools
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: dagre
|
|
---
|
|
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
|
|
id)I am a cloud(
|
|
id))I am a bang((
|
|
Tools
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: elk
|
|
---
|
|
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
|
|
id)I am a cloud(
|
|
id))I am a bang((
|
|
Tools
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: cose-bilkent
|
|
---
|
|
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
|
|
id)I am a cloud(
|
|
id))I am a bang((
|
|
Tools
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: tidy-tree
|
|
---
|
|
mindmap
|
|
root((mindmap))
|
|
A
|
|
a
|
|
apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
b
|
|
c
|
|
d
|
|
B
|
|
apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
D
|
|
apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: dagre
|
|
---
|
|
mindmap
|
|
root((mindmap))
|
|
A
|
|
a
|
|
apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
b
|
|
c
|
|
d
|
|
B
|
|
apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
D
|
|
apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: elk
|
|
---
|
|
mindmap
|
|
root((mindmap))
|
|
A
|
|
a
|
|
apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
b
|
|
c
|
|
d
|
|
B
|
|
apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
D
|
|
apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
|
|
</pre>
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: cose-bilkent
|
|
---
|
|
mindmap
|
|
root((mindmap))
|
|
A
|
|
a
|
|
apa[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
apa2[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
b
|
|
c
|
|
d
|
|
B
|
|
apa3[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
D
|
|
apa5[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
apa4[I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on. I am a long long multline string passing several levels of text. Lorum ipsum and so on]
|
|
|
|
</pre>
|
|
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: tidy-tree
|
|
---
|
|
mindmap
|
|
((This is a mindmap))
|
|
child1
|
|
grandchild 1
|
|
grandchild 2
|
|
child2
|
|
grandchild 3
|
|
grandchild 4
|
|
child3
|
|
grandchild 5
|
|
grandchild 6
|
|
|
|
</pre>
|
|
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: dagre
|
|
---
|
|
mindmap
|
|
((This is a mindmap))
|
|
child1
|
|
grandchild 1
|
|
grandchild 2
|
|
child2
|
|
grandchild 3
|
|
grandchild 4
|
|
child3
|
|
grandchild 5
|
|
grandchild 6
|
|
|
|
</pre>
|
|
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: elk
|
|
---
|
|
mindmap
|
|
((This is a mindmap))
|
|
child1
|
|
grandchild 1
|
|
grandchild 2
|
|
child2
|
|
grandchild 3
|
|
grandchild 4
|
|
child3
|
|
grandchild 5
|
|
grandchild 6
|
|
|
|
</pre>
|
|
|
|
<pre class="mermaid">
|
|
---
|
|
config:
|
|
layout: cose-bilkent
|
|
---
|
|
mindmap
|
|
((This is a mindmap))
|
|
child1
|
|
grandchild 1
|
|
grandchild 2
|
|
child2
|
|
grandchild 3
|
|
grandchild 4
|
|
child3
|
|
grandchild 5
|
|
grandchild 6
|
|
|
|
</pre>
|
|
|
|
<hr />
|
|
<script type="module">
|
|
import mermaid from '/mermaid.esm.mjs';
|
|
import tidytree from '/mermaid-layout-tidy-tree.esm.mjs';
|
|
import layouts from './mermaid-layout-elk.esm.mjs';
|
|
mermaid.registerLayoutLoaders(layouts);
|
|
mermaid.registerLayoutLoaders(tidytree);
|
|
mermaid.initialize({
|
|
theme: 'default',
|
|
logLevel: 3,
|
|
securityLevel: 'loose',
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|