画图工具 Mermaid 学习笔记——概述

于 2024-08-01 10:34:58 发布
阅读量240 收藏 3
点赞数 5
分类专栏： Mermaid 学习 文章标签： 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alyeska/article/details/140839488
版权

Mermaid，一款基于markdown语法的图表绘制工具

官方文档：About Mermaid | Mermaid 

使用途径：

 在线编辑器：Online FlowChart & Diagrams Editor - Mermaid Live Editor

Mermaid Chart Editor：Home | Mermaid Chart

VS Code 插件：(其他环境对应插件同样在官方文档有给出)

Mermaid Chart - Create complex, visual diagrams with text. A smarter way of creating diagrams.

当然自己用的时候不需要太复杂的功能，首先在vscode中需要装预览markdown文件的扩展，之后装一个名为 Markdown Preview Mermaid Support 的扩展，在md文件中插入如下格式代码即可在侧边预览中看见和导出对应图片：

```mermaid
中间为mermaid语法的画图代码
```

此图为安装了 Mermaid Markdown Syntax Highlight 扩展（语法高亮区分）后的演示

 

Alyeska
关注
专栏目录
markdown绘图插件----mermaid简介
weixin_33901641的博客
10-22 4769
作者：黄永刚 mermaid简介 当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。 mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。 先来看个例子: 1.流程图(fl...
Mermaid绘图大师：大模型让图表创作变得触手可及
weixin_46423102的博客
05-12 1672
在快节奏的工作环境中，Mermaid绘图大师是您的得力助手。它是一款基于AppBuilder Agent应用框架开发的智能工具，专为将自然语言转换为Mermaid支持的精美可视化图表而设计。无论您需要思维导图、时序图、流程图还是甘特图，Mermaid绘图大师都能助您一臂之力，释放您的创造力，提升工作效率。
vscode使用mermaid
snoto的专栏
04-24 1233
【代码】vscode使用mermaid。
vscode：Mermaid流程图的绘制（Markdown Preview Mermaid Support不太好用的话，使用Mermaid Editor试试）
viviliving的专栏
10-19 7886
1、安装Markdown Preview Mermaid Support。安装了Mermaid Editor这个插件后使用mmd文件可以显示。但是发现下面的语法不支持。新建test.md文件。
angular-mermaid-js:一个有效的示例，如何集成图形布局工具[mermaid]（https
04-27
角美人鱼 一个如何将图布局工具与Angular.js集成的工作示例。 要考虑的重要领域是 在页面上呈现美人鱼对象之前对它进行消毒 var gs = "graph TD; " + $scope.graphScript return $sce.trustAsHtml(gs); 更新图表后重新初始化美人鱼引擎 setTimeout(function(){mermaid.init();},1000) 现场演示 index.html是现场演示的代码，可在此处查看： :
Mermaid语法1-概述
Neptuneyut的博客
02-23 900
文章目录Mermaid能做什么？快速预览Mermaid可以绘制的图FlowchartGantt diagramPie chartSequence diagramClass diagramGit graph - exclamation experimentalEntity Relationship Diagram - exclamation experimentalUser Journey Diagram参考 Mermaid能做什么？ 想要接触Mermaid的人多半是从Markdown走过来的，Markdow
类Markdown实时绘图编辑器mermaid-live-editor
wbsu2004的博客
01-27 1万+
Mermaid 能通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。
【Markdown】【mermaid】Mermaid 简介：使用Markdown动态创建和修改图表
hmywillstronger的博客
03-21 851
什么是 Mermaid图表类型1. 流程图 (Flowchart)2. 序列图 (Sequence diagram)3. 甘特图 (Gantt diagram)4. 类图 (Class diagram)5. Git 图 (Git graph)6. 实体关系图 (Entity Relationship Diagram)7. 用户旅程图 (User Journey Diagram)8. 象限图 (Quadrant Chart)9. XY 图 (XY Chart)安装和使用贡献和支持。
github中Mermaid的用法
微电子学与固体电子学-俞驰
07-05 1104
这个东西是最近推出，首先是自己的repository中新建一个readme.md文件。如果没有开头的插件，是不会成功显示的。
Linux学习笔记——LMo_LW
LMo_LW的博客
08-07 249
突发奇想学学Linux操作系统 做第一性原理计算的可能始终会和Linux操作系统打交道，以后还会接触到更多的Linux下的软件，好好学习天天向上。 下面的操作还是留着，还不是很熟悉在这里写学习笔记。 撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜体：Ctrl/Command + I 标题：Ctrl/Command + Sh...
JAYのpython学习笔记——继承和多态
m0_37199634的博客
02-16 580
父类和子类 继承可以定义一个通用类（父类）,随后将它扩展成更多特定的类（子类） 在面向对象的术语中，如果类C1扩展自另一个类C2，那么就将C1成为派生类或子类，将C2称为超类基类或父类。 子类除了可以继承父类中的数据域和方法，还可以有其他的数据域和方法 #mermaid-svg-OAvgZRNyfWtFWrPr .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;
mermaid流程图工具_Markdown绘图插件 —— Mermaid教程
weixin_28701593的博客
02-01 2053
mermaid简介当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。先来看个例子:1、流程图(flowchart)graphLR;A-->B;A-->C;B-->D;C-->...
HTML学习笔记—— 文本颜色设置：
weixin_43141623的博客
09-28 510
HTML学习笔记—— 文本颜色设置： 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示； 全新的...
40 Oracle深度学习笔记——全库备份常用
ugghhj的博客
11-08 165
40 Oracle深度学习笔记——全库备份常用
Markdown 进阶语法：Mermaid 绘图 (一) - 流程图 (Flowchart)
小嗷犬的博客
07-04 1万+
Mermaid是一个基于 JavaScript 的图表绘制工具，它使用类似 Markdown 的简单语法来编写，并动态地将它们渲染成图表。流程图(Flowchart) : 用关键词graph或flowchart表示顺序图(Sequence Diagram) : 用关键词表示类图(Class Diagram) : 用关键词表示状态图(State Diagram) : 用关键词表示实体关系图(Entity Relationship Diagram) : 用关键词erDiagram表示用户旅程图。
[常用工具] mermaid学习笔记
You and Me
05-22 2336
mermaid学习笔记
如何使用 Mermaid、GitHub 和 VSCode 用代码创建关系图一
AI架构师易筋
01-31 1809
图表是技术文档的重要组成部分。在本文中，我们将探讨如何使用代码生成图表并在 Markdown 中利用它们。下面是代码生成的图表的示例：无需工具，无需将形状拖动、对齐和对齐到位置。只是编码。有趣吧？
ChatGPT进阶——如何辅助设计E-R图、流程图和时序图等
热门推荐
SmartLab307的博客
03-29 1万+
Mermaid 是一个基于 JavaScript 的图表绘制工具，通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。Mermaid 诞生的主要目的是让文档的更新能够及时跟上开发进度。
vue mermaid
最新发布
08-23
Vue Mermaid 是一个Vue组件，它集成了Mermaid库，后者是一个基于JavaScript的图表绘制工具，可以用来生成流程图、序列图、甘特图等。Vue Mermaid让开发者能够在Vue项目中轻松地添加和管理这些图表。 使用Vue Mermaid组件，开发者只需要在Vue项目中安装并引入组件，然后按照Mermaid的语法编写图表代码，就可以在Vue应用中渲染出图表。这个组件极大地简化了在Vue项目中使用Mermaid的过程，使得开发者无需担心Mermaid脚本的嵌入和管理问题。 以下是一个简单的Vue Mermaid组件使用示例： 1. 首先，安装Vue Mermaid组件： ``` npm install vue-mermaid ``` 2. 在Vue组件中引入并注册Vue Mermaid组件： ```javascript <template> <mermaid :chart="chart" /> </template> <script> import { mermaid } from 'vue-mermaid'; export default { components: { mermaid }, data() { return { chart: ` graph TD A[开始] --> B{判断} B -->|条件1| C[处理1] B -->|条件2| D[处理2] C --> E[结束] D --> E[结束] ` }; } }; </script> ``` 在这个示例中，我们定义了一个流程图，Vue Mermaid组件将根据`chart`数据属性中的Mermaid语法渲染出对应的流程图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值