Markdown-it Diagram:强大且灵活的流程图控件插件
Jun 08. 2024

AI文摘
此内容由AI根据文章内容自动生成,并已由人工审核
加载中。
npm versionnpm downloadsbundleJSDocsLicense

markdown-it-diagram 是一个用于在 Markdown 文档中创建图表的 markdown-it 插件。它支持 mermaid 和 plantuml,同时提供了如缩放、移动等控件功能。

UML 示例

Markdown 支持:plantumlmermaiddotditaa

功能

  • 支持PlantUML、Mermaid、Dot、Ditaa图形语法
  • 包含缩放、移动、粗糙渲染、下载、复制源代码等快捷操作
  • 支持Shift键结合鼠标滚轮进行缩放
  • 集成模态窗口预览模式
  • 实现长按鼠标左键拖动图表功能

PlantUML

在线尝试

```plantuml
Bob -> Alice : Chào cô, chúc cô buổi trưa vui vẻ!
```
uml diagram

DOT

```dot
digraph example1 {
    1 -> 2 -> { 4, 5 };
    1 -> 3 -> { 6, 7 };
}
```
uml diagram

ditaa

警告: 在 PlantUML 中,仅支持生成 PNG,ASCII Art 图片。

```ditaa
+--------+   +-------+    +-------+
    |        | --+ ditaa +--> |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |     {d}|   |       |    |       |
    +---+----+   +-------+    +-------+
        :                         ^
        |       Lots of work      |
        +-------------------------+
```
uml diagram

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>
> comment on / twitter
>
CC BY-NC-SA 4.0 2021-PRESENT © Ryan uo