Mermaid 插件（流程图等）

可以引入 mermaid 插件来支持流程图或者其他图形：

cdn 引入 mermaid 资源

<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>

引入插件：

import VueMarkdownEditor from '@kangc/v-md-editor';
import createMermaidPlugin from '@kangc/v-md-editor/lib/plugins/mermaid/cdn';
import '@kangc/v-md-editor/lib/plugins/mermaid/mermaid.css';

VueMarkdownEditor.use(createMermaidPlugin());

使用：

<template>
  <v-md-editor v-model="text" height="500px" />
</template>

<script>
const text = `\`\`\`mermaid
graph LR
A --- B
B-->C[fa:fa-ban forbidden]
B-->D(fa:fa-spinner);
\`\`\`
`;

export default {
  data() {
    return {
      text,
    };
  },
};
</script>

提示

更多语法参考mermaid 官方文档 (opens new window)