浙江网站建设公司名单,上海比较好的服装外贸公司,互联网保险的特点,广州网站建设q479185700棒一、安装Mermaid
首先#xff0c;你需要在你的项目中安装Mermaid。可以通过npm或yarn来安装#xff1a;
npm install mermaid --save
# 或者
yarn add mermaid结果如图#xff1a; 二、Vue
方法一#xff1a;使用pre标签
使用ref属性可以帮助你在Vue组件中访问DOM元素 …
一、安装Mermaid
首先你需要在你的项目中安装Mermaid。可以通过npm或yarn来安装
npm install mermaid --save
# 或者
yarn add mermaid结果如图 二、Vue
方法一使用pre标签
使用ref属性可以帮助你在Vue组件中访问DOM元素
templatediv classscreen-contanier idworkstationpre classmermaid refmermaidflowchart TDA[Start] -- B{Is it?}B -- Yes -- C[OK]C -- D[Rethink]D -- BB -- No ---- E[End]/pre/div
/template
scriptimport * as mermaid from mermaid;
/script直接使用div标签不起作用原因 Mermaid未正确初始化确保在你的Vue组件的mounted钩子中正确调用了Mermaid的初始化函数。Mermaid需要在DOM元素完全加载后才能正确初始化。 pre标签和div标签在处理文本和布局上有着本质的区别这可能是你遇到Mermaid在div中不起作用的原因之一。 pre标签用于预格式化文本它会保留空格和换行使得内部的文本能够原样输出这对于Mermaid语法尤其重要因为它依赖于特定的格式和缩进。 然而div是一个块级元素它默认不会保留空白字符和换行。这意味着当你在div中输入Mermaid语法时所有的空格和换行会被浏览器忽略从而破坏了Mermaid语法的结构导致Mermaid无法正确解析和渲染图表。 方法二使用div标签
templatediv classscreen-contanier idworkstationdiv classmermaid refmermaidGraphflowchart TDA[Start] -- B{Is it?}B -- Yes -- C[OK]C -- D[Rethink]D -- BB -- No ---- E[End]/div/div
/template
scriptimport * as mermaid from mermaid;export default {name: MermaidExample,mounted() {mermaid.initialize({ startOnLoad: true });this.renderMermaid();},methods: {renderMermaid() {mermaid.init(undefined, this.$refs.mermaidGraph);},},
};
/scriptstyle scoped.mermaid {/* 确保有足够空间显示图表 *//* 样式 */height: 400px;
}
/style三、展示 了解mermaid
可以参考之前的文章
markdown的mermaid用法及例子_markdown mermaid-CSDN博客
