v-md-editor

# Mermaid 插件（流程图等）

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

目录导航
    • H 
    ```mermaid
    graph LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
    ```
     
    A
    B
     forbidden

    # 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)

    ← todo-list →