mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-08-15 06:19:24 +02:00
32c45dd69b
* develop: (48 commits) Update bug_report.yml v10.0.2 fix: dayjs import extension Setting version to 10.0.1 Updated import of cytoscape for consistent behavior fixup! fixup! Move pie outerStrokeWidth to theme variables, update docs fixup! Move pie outerStrokeWidth to theme variables, update docs Move pie outerStrokeWidth to theme variables, update docs Use cytoscape esm Revert "chore: Defer elk loading" Revert "Split cytoscape" fix: Class with members and styles typo Update docs chore: Add vitest imports chore: Fix snapshots fix #4157: Inject only fontFamily without replacing themeVariables Update packages/mermaid/src/mermaid.ts Fix test ...
55 lines
1.6 KiB
HTML
55 lines
1.6 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: 'trebuchet ms', verdana, arial; */
|
|
font-family: 'Courier New', Courier, monospace !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>Pie chart demos</h1>
|
|
<pre class="mermaid">
|
|
pie title Pets adopted by volunteers
|
|
accTitle: simple pie char demo
|
|
accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
|
|
"Dogs" : 386
|
|
"Cats" : 85
|
|
"Rats" : 15
|
|
</pre>
|
|
|
|
<hr />
|
|
<pre class="mermaid">
|
|
%%{init: {"pie": {"textPosition": 0.9}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
|
|
pie
|
|
title Key elements in Product X
|
|
accTitle: Key elements in Product X
|
|
accDescr: This is a pie chart showing the key elements in Product X.
|
|
"Calcium" : 42.96
|
|
"Potassium" : 50.05
|
|
"Magnesium" : 10.01
|
|
"Iron" : 5
|
|
</pre>
|
|
|
|
<script type="module">
|
|
import mermaid from '/mermaid.esm.mjs';
|
|
mermaid.initialize({
|
|
theme: 'forest',
|
|
// themeCSS: '.node rect { fill: red; }',
|
|
logLevel: 3,
|
|
securityLevel: 'loose',
|
|
// flowchart: { curve: 'basis' },
|
|
// gantt: { axisFormat: '%m/%d/%Y' },
|
|
sequence: { actorMargin: 50 },
|
|
// sequenceDiagram: { actorMargin: 300 } // deprecated
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|