Vue前端页面嵌入mermaid图表--流程图

avatar
作者
猴君
阅读量:0

一、安装Mermaid

首先,你需要在你的项目中安装Mermaid。可以通过npm或yarn来安装:

npm install mermaid --save # 或者 yarn add mermaid 

结果如图:

二、Vue

方法一:使用pre标签

使用ref属性可以帮助你在Vue组件中访问DOM元素

<template>   <div class="screen-contanier" id="workstation">      <pre class="mermaid" ref="mermaid">       flowchart TD       A[Start] --> B{Is it?}       B -- Yes --> C[OK]       C --> D[Rethink]       D --> B       B -- No ----> E[End]     </pre>   </div> </template> <script>   import * as mermaid from 'mermaid'; </script> 

直接使用div标签不起作用原因:

Mermaid未正确初始化:确保在你的Vue组件的mounted钩子中正确调用了Mermaid的初始化函数。Mermaid需要在DOM元素完全加载后才能正确初始化。

<pre>标签和<div>标签在处理文本和布局上有着本质的区别,这可能是你遇到Mermaid在<div>中不起作用的原因之一。

<pre>标签用于预格式化文本,它会保留空格和换行,使得内部的文本能够原样输出,这对于Mermaid语法尤其重要,因为它依赖于特定的格式和缩进。

然而,<div>是一个块级元素,它默认不会保留空白字符和换行。这意味着当你在<div>中输入Mermaid语法时,所有的空格和换行会被浏览器忽略,从而破坏了Mermaid语法的结构,导致Mermaid无法正确解析和渲染图表。

方法二:使用div标签

<template>   <div class="screen-contanier" id="workstation">      <div class="mermaid" ref="mermaidGraph">       flowchart TD       A[Start] --> B{Is it?}       B -- Yes --> C[OK]       C --> D[Rethink]       D --> B       B -- No ----> E[End]     </div>   </div> </template> <script>   import * as mermaid from 'mermaid';    export default {   name: 'MermaidExample',   mounted() {     mermaid.initialize({ startOnLoad: true });     this.renderMermaid();   },   methods: {     renderMermaid() {       mermaid.init(undefined, this.$refs.mermaidGraph);     },   }, }; </script>  <style scoped>   .mermaid {   /* 确保有足够空间显示图表 */       /* 样式 */   height: 400px; } </style> 

三、展示

 了解mermaid

可以参考之前的文章:

markdown的mermaid用法及例子_markdown mermaid-CSDN博客

 

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!