MermaidItMarkdown 使用手册

一个将让 markdown-it 支持 mermaid 语法的插件

安装

本插件依赖 mermaid 库，所以同时需要安装 mermaid 库

npm install mermaid-it-markdown mermaid --save
# or
yarn add mermaid-it-markdown mermaid

使用

在 markdown-it 中使用

const md = require('markdown-it')()
const mermaidItMarkdown = require('mermaid-it-markdown')
md.use(mermaidItMarkdown)

在 mavon-editor 中使用

注意！！！

mavon-editor 版本 3.0.1 存在一个bug，无法调用任何插件；

建议使用 3.0.0-beta 版本（已测试），或者等待 3.0.2 版本发布。

import MavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import mermaidItMarkdown from 'mermaid-it-markdown'

const markdownIt = MavonEditor.mavonEditor.getMarkdownIt();
markdownIt.use(mermaidItMarkdown)

• markdown 语法

    ```mermaid
    flowchart TD
        A[Hard] -->|Text| B(Round)
        B --> C{Decision}
        C -->|One| D[Result 1]
        C -->|Two| E[Result 2]
    ```

更多语法请参考 mermaid在线示例

完整示例：

• 源码：

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import MermaidIt from "mermaid-it-markdown";
import { mermaidDefaultContent } from "./mermaid-it-markdown.support";
import markdownIt from "markdown-it";

const md = markdownIt();
md.use(MermaidIt);

const content = ref(mermaidDefaultContent);
const render = computed(() => md.render(content.value));
</script>

<template>
  <div class="mermaid-it-markdown">
    <h3>输入 markdown 文本：</h3>
    <a-textarea v-model="content" style="height: 500px"></a-textarea>
    <h3>渲染结果：</h3>
    <div class="" v-html="render"></div>
  </div>
</template>

<style scoped lang="less"></style>