<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>引入指定版本mermaid demo - Cherry Editor</title>
<link rel="stylesheet" type="text/css" href="../packages/cherry-markdown/dist/cherry-markdown.css">
<link rel="Shortcut Icon" href="../logo/favicon.ico">
<style>
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
margin: 0;
}
#markdown {
min-width: 800px;
max-width: 2600px;
width: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="markdown"></div>
<textarea id="md-source">
## 引入cherry并使用自己的[mermaid](https://mermaid.js.org/){target=_blank}
```html
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.6.0/dist/mermaid.min.js"></script>
<script src="yourPath/cherry-markdown.core.js"></script>
<script src="yourPath/addons/cherry-code-block-mermaid-plugin.js"></script>
<script>
Cherry.usePlugin(CherryCodeBlockMermaidPlugin, {
mermaid: window.mermaid,
mermaidAPI: window.mermaid,
});
var cherryEditor = new Cherry({id: 'markdown'});
</script>
```
## 效果
> 可以使用对应版本mermaid的语法
- 思维导图：
```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
```
- 统计图
```mermaid
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
- 计划
```mermaid
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
```
</textarea>
<script src="https://cdn.jsdelivr.net/npm/mermaid@11.6.0/dist/mermaid.min.js"></script>
<script src="../packages/cherry-markdown/dist/cherry-markdown.core.js"></script>
<script src="../packages/cherry-markdown/dist/addons/cherry-code-block-mermaid-plugin.js"></script>
</body>
<script>
Cherry.usePlugin(CherryCodeBlockMermaidPlugin, {
mermaid: window.mermaid,
mermaidAPI: window.mermaid,
});
var config = {
id: 'markdown',
engine: {
syntax: {
codeBlock: {
changeLang: false,
}
}
}
};
var cherry = new Cherry(config);
cherry.setValue(document.getElementById('md-source').value);
</script>
</html>