一个简单易用的编程式绘图工具mermaid

最新推荐文章于 2024-05-30 23:45:00 发布
最新推荐文章于 2024-05-30 23:45:00 发布
阅读量3.6k 收藏 1
点赞数 1
分类专栏： 前端开发 文章标签： 绘图 javascript mermaid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/littlezhuhui/article/details/91773639
版权

       最近在编写文档时，想在图中插入一些示意图，按原来的做法，是想用visio之类的画图软件来完成这样的工作的。不巧新装的电脑，上面没有安装visio软件。而且只是想画一些简单的树状图之类的，想想这样的工作用word自带的画图功能也能胜任吧。

可是一直以来不太喜欢用word自带的画图功能，说不出来的感觉，说方便吧，又不方便。想想还是在网上查找一下有没有小巧易用的画图工具。

      以前用过Graphviz，这个工具的特点是用脚本语言来描述图形，软件自动生成图片。这是个命令行的工具。

没想到这次发现有人将Graphviz的思想用javascript实现了。这个工具叫mermaid,它提供了一种类似markdow的语法来创建各种图形。

这一种思路可能会受到很多程序员的喜欢吧。程序员更习惯写代码，而不是拿画笔。

对我而言，更愿意从例子入手

看一下这个官网上的例子吧

https://unpkg.com/mermaid@8.0.0/dist/index.html

更多的信息可以查看：

https://github.com/knsv/mermaid

littleZhuHui
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mermaid流程图工具_Markdown绘图插件 —— Mermaid教程
weixin_28701593的博客
02-01 2001
mermaid简介当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。先来看个例子:1、流程图(flowchart)graphLR;A-->B;A-->C;B-->D;C-->...
mermaid流程图工具_markdown绘图插件----mermaid简介
weixin_39743369的博客
12-20 390
作者：黄永刚mermaid简介当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。先来看个例子:1.流程图(flowchart)graph LR;A-->B;A-->C;B-->D;C...
mermaid 用法
nankeyimeng的博客
01-04 3804
作者：黄永刚 mermaid简介 当撰写文档的时候，对于流程图的生成大多使用Visio等繁重的工具，没有一种轻便的工具能够画图从而简化文档的编写，就像markdown那样。 mermaid解决这个痛点，这是一个类似markdown语法的脚本语言，通过JavaScript实现图表的生成。 先来看个例子: 1.流程图(flowch
Python库 | markdown-mermaid-to-images-0.1.2.tar.gz
03-06
python库。 资源全名：markdown-mermaid-to-images-0.1.2.tar.gz
使用大模型结合Mermaid实现业务流程图快速生成
陈Sir的博客
05-23 1778
本文档主要介绍使用ChatGPT结合Mermaid实现业务流程简单快速生成，满足一些为了凑页数对作图要求不高的文档。置于那些对图片和文档质量要求很高的，此方案不太行了，需要大家手工画了。
基于md的mermaid实现树可视化的python程序
m0_46614155的博客
09-25 416
【代码】集合md的mermaid实现树可视化的python程序。
[python] Pelican+Mermaid无插件实现
s651665496的专栏
03-01 847
https://chainomics.tech/dang-ti-hu-yu-shang-mei-ren-yu-pelicanmermaidwu-cha-jian-shi-xian.html python中markdown库中不能直接解析mermaid相关内容。 markdown在生成html时会调用extension中的类，需要在markdown.extension中添加这个类。 markdown的拓展都在python环境中，以虚拟环境为例，extension文件夹路径在venv/lib/pyth
mermaid.ink:给定一个美人鱼代码（类似于markdown），将图像输出给您
04-30
给定一个美人鱼代码： graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] 将其粘贴到，...
mermaid-js_docs.7z
09-08
Mermaid JS 是一个强大的JavaScript库，它允许开发者通过简单的语法在Markdown中嵌入代码来生成各种图表，如流程图、序列图、甘特图等。这个"mermaid-js_docs.7z"压缩包包含了官方的文档，对于想要学习和使用Mermaid...
mermaid-live-editor:位置已移至https
04-12
获取一个链接以编辑该图，以便其他人可以对其进行调整并向其发送新的链接设置设置很简单。 yarn install或者使用Docker运行HTTP服务器docker build -t mermaidjs/mermaid-live-editor ...
headless-mermaid:一个Mermaid.js处理程序，用于Node.js的服务器端呈现
05-14
无头美人鱼一个处理程序，用于Node.js的服务器端呈现。为什么和什么mermaid.js需要使用浏览器来呈现图，这使得为服务器端应用程序呈现可伸缩矢量图形带来了挑战。 headless-mermaid利用headless-chromium渲染图形并...
vue-mermaid:Vue组件的美人鱼流程图
04-30
美人鱼Vue Componet的美人鱼流程图要求安装安装程序# install dependenciesnpm install --save vue-mermaid用法注册组件import VueMermaid from "vue-mermaid" ;Vue . use ( VueMermaid ) ;使用组件export default {...
适合c语言的编程画图,几个有趣的画图编程
weixin_28859781的博客
05-21 1061
该楼层疑似违规已被系统折叠隐藏此楼查看此楼#includemain(){inti;clrscr();textbackground(BLACK);textcolor(WHITE);gotoxy(10,2);putch(0xda);for(i=1;i<30;i++)putch(0xc4);putch(0xbf);for(i=3;i<9;i++){gotoxy(10,i);putch(0...
mermaid教程
拱卒的博客
08-30 315
graph LR A[需求分析] --> B[排期处理] B --> C[代码开发] C --> D[提交合并运行] D --> E((接口自测)) E --> F[接口自测正确编写Yapi] E -.接口测试失败返回代码开发.-> C F --> H[对接前端] H -.前端发现问题.-> C H --> I[前后端业务逻辑不存在问题结束] graph LR A[需求分析] --> B[排期处理] B --> C[代码开发] C --&
适合入门练手的Python编程的60多个绘图案例
qq_38887171的博客
10-31 1550
最近施工专题系列，来到 matplotlib 绘图部分。有朋友问我，系统入门 matplotlib 的电子书有没有推荐，今天拿出一本我觉得很不错的pdf电子书，以飨大家。 这本书循序渐进的介绍了60多个绘图案例，基本覆盖matplotlib的主要常用绘图种类，并且附有详细的绘图指导。 比如绘制基本的多边形图： import numpy as np import matplotlib.pyplot as plt import matplotlib.tri as tri data = np.random.ra
绘图工具GraphViz、Mermaid比较
Donald Su
07-17 5622
在开发过程中，会经常绘制一些图像，使用Visio等软件比较复杂，而且还需要win的环境进行安装，过程繁琐、复杂。可以使用脚本的方式绘制图形。 下面对常见的 GraphViz、Mermaid 工具进行比较和介绍。 GraphViz graphviz是贝尔实验室开发的一个开源的工具包，它使用一个特定的DSL(领域特定语言): dot作为脚本语言，然后使用布局引擎来解析此脚本，并完成自动布局。graph...
Markdown 使用技巧之利用 Mermaid 进行绘制流程图
最新发布
独泪了无痕
05-30 1889
Markdown 的原生语法不支持绘制图形，但通过 Mermaid 扩展，我们可以将一些格式化的文字渲染成我们需要的图形。Mermaid 是一个类似 Markdown 的开源脚步语言，它能够根据输入的语句自动生成合适的图像，方便于 Markdown 文档撰写者通过文本方式生成图形的扩展工具。相比 Visio 它要轻很多，几行文字便可生成一幅完整且美观的流程图。
UML图语法和Mermaid语言
飞浪纪元FE的博客
05-30 1224
UML图语法和Mermaid语言MermaidMermaid 介绍Mermaid的好处Mermaid-天然的 Web 友好特性使用 MermaidMermaid支持UML图的设计简介标记块写法第一个示例句法句法-类句法-定义类句法-定义类的成员句法-定义类的成员1句法-定义类的成员2句法-返回值类型句法-泛型句法-访问类型句法-定义关系关系句法-示例关系句法-标签示例关系句法-箭头朝向关系上的基数/多重性对类进行注释注释交互[csdn的markdown不会生效，需专业软件]交互示例1 Mermaid Mer
Mermaid绘制UML图教程
踏雨歌青春，诗酒趁年华
02-14 2818
本文介绍如何使用Mermaid绘制UML图。Mermaid是一款简单而强大的图形描述语言，通过简单的文本语法，用户可以绘制各种类型的图表。它适用于各种场景，包括流程图、时序图、甘特图等。使用Mermaid，你可以更轻松地表达和分享你的图形设计。
可以使用Markdown 的 mermaid帮我写一个流程图？
06-03
可以的，下面是一个使用mermaid语法的简单流程图的例子： ``` ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` ``` 解释一下这个语法： - `graph TD;` 表示整个图的方向是从上到下（Top-Down）。 - `A-->B;` 表示从节点 A 到节点 B 有一个有向边。 - `A-->C;` 表示从节点 A 到节点 C 有一个有向边。 - `B-->D;` 表示从节点 B 到节点 D 有一个有向边。 - `C-->D;` 表示从节点 C 到节点 D 有一个有向边。 你可以把这段代码粘贴到支持Markdown的编辑器中，就可以看到这个流程图了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值