markdown-it-diagram
是一个用于在 Markdown 文档中创建图表的 markdown-it
插件。它支持 mermaid 和 plantuml,同时提供了如缩放、移动等控件功能。
UML 示例 #
Markdown 支持:plantuml、mermaid、dot、ditaa
功能 #
- 支持PlantUML、Mermaid、Dot、Ditaa图形语法
- 包含缩放、移动、粗糙渲染、下载、复制源代码等快捷操作
- 支持Shift键结合鼠标滚轮进行缩放
- 集成模态窗口预览模式
- 实现长按鼠标左键拖动图表功能
PlantUML #
```plantuml
Bob -> Alice : Chào cô, chúc cô buổi trưa vui vẻ!
```
DOT #
```dot
digraph example1 {
1 -> 2 -> { 4, 5 };
1 -> 3 -> { 6, 7 };
}
```
ditaa #
警告: 在 PlantUML 中,仅支持生成 PNG,ASCII Art 图片。
```ditaa
+--------+ +-------+ +-------+
| | --+ ditaa +--> | |
| Text | +-------+ |diagram|
|Document| |!magic!| | |
| {d}| | | | |
+---+----+ +-------+ +-------+
: ^
| Lots of work |
+-------------------------+
```
mermaid #
```mermaid
graph TD;
A-->B;
A-->C;
B-->D;
C-->D;
```
graph TD; A-->B; A-->C; B-->D; C-->D;
安装 #
npm install markdown-it-diagram --save
使用方法 #
Vite 配置 #
// vite.config.ts
import MarkdownItDiagrams from 'markdown-it-diagram'
import Markdown from 'unplugin-vue-markdown/vite'
export default defineConfig({
plugins: [
Markdown({
markdownItSetup(md) {
md.use(MarkdownItDiagrams, {
showController: true, // show controller,default:false
/**
* PlantUML options
* ditaa:imageFormat 'png| txt'
* plantuml: imageFormat'png| svg| txt'
* dot: imageFormat'png| svg| txt'
*/
// imageFormat: 'svg', // image format:svg|png|txt,default:svg
// server: '', // plantuml server,default:http://www.plantuml.com/plantuml
// ditaa: {
// imageFormat: 'svg', // image format:png|txt,default:svg
// server: '', // plantuml server,default:http://www.plantuml.com/plantuml
// }
})
}
})
]
})
If you open the controller, you need to import the script in the initialization. vue3 example:
<script setup lang="ts">
import { markdownItDiagramDom } from 'markdown-it-diagram/dom'
import { onMounted } from 'vue'
onMounted(async () => {
// if you want to use mermaid, you need to install mermaid.js
// npm install mermaid
// import mermaid from 'mermaid'
mermaid.initialize({ startOnLoad: false })
await mermaid.run()
// initialize markdown-it-diagram/dom script
await markdownItDiagramDom()
})
</script>