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

一、安装Mermaid

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

bash 复制代码
npm install mermaid --save
# 或者
yarn add mermaid

结果如图:

二、Vue

方法一:使用pre标签

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

html 复制代码
<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标签

html 复制代码
<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博客

相关推荐
AverageJoe199126 分钟前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平28 分钟前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript
bitbitDown30 分钟前
我用Playwright爬了掘金热榜,发现了这些有趣的秘密... 🕵️‍♂️
前端·javascript·vue.js
陈随易34 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
markyankee10135 分钟前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
ma7738 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在38 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
借月40 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang42 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻43 分钟前
前端面试十一之TS
前端