[Markdown] 一、mermaid

最新推荐文章于 2024-07-23 12:17:07 发布
最新推荐文章于 2024-07-23 12:17:07 发布
阅读量169 收藏
点赞数
分类专栏： markdown 文章标签： markdown mermaid
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JeromeCoco/article/details/109016528
版权

作者：解琛
时间：2020 年 10 月 11 日

一、mermaid

mermaid

1.1 Flowchart

three
one
c2
c1
two
b2
b1
a2
a1

1.2 Sequence diagram

Alice Bob John Hello John, how are you? Fight against hypochondria loop [Healthcheck] Rational thoughts prevail! Great! How about you? Jolly good! Alice Bob John

1.3 Gantt diagram

Mon 06 Mon 13 已完成 进行中 计划中 现有任务 Adding GANTT diagram functionality to mermaid

1.4 Class diagram

Class01 int chimp int gorilla size() AveryLongClass Class03 Class04 Class05 Class06 Class07 Object[] elementData equals() Class08 Class09 C2 C3 Cool Where am i? Cool label

1.5 Entity Relationship Diagram

CUSTOMER ORDER LINE-ITEM DELIVERY-ADDRESS places contains uses

1.6 User Journey Diagram

Cat Me
Go to work
Go to work Me
Make tea
Make tea Me
Go upstairs
Go upstairs Me Cat
Do work
Do work
Go home
Go home Me
Go downstairs
Go downstairs Me
Sit down
Sit down My working day

1.7 State diagrams
Active
EvNumLockPressed
EvNumLockPressed
NumLockOff
NumLockOn
EvCapsLockPressed
EvCapsLockPressed
CapsLockOff
CapsLockOn
EvCapsLockPressed
EvCapsLockPressed
ScrollLockOff
ScrollLockOn

1.8 Directives

Alice Bob Hi Bob Hi Alice Alice Bob

1.9 Pie chart diagrams

40% 46% 9% 5% Key elements in Product X Calcium Potassium Magnesium Iron

1.10 Git graph

master, m9acFEE

mk1IPia

6mbBV7X

vMO3yg1

newbranch, 9c6gquC

s9Ab37C
解琛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
markdown-Mermaid语法整理
槐安客迹
04-02 2202
Mermaid语法 语法: ```mermaid 内容 ``` 例子: #mermaid-svg-eG2tVRFbUPPScjOl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-eG2tVRFbUPPScjOl .error-icon{fill:#552222;}#mermaid-svg-eG2tVRFbUPPScjOl .error-text{fill:#55
vscode-markdown-mermaid:将人鱼图和流程图支持添加到VS Code的内置markdown预览中
04-28
使用mermaid围栏代码块在markdown中创建图： ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` 您也可以使用:::块： ::: mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ...
markdown的mermaid用法及例子
敲厉害的燕宝的博客
05-16 1500
即流程图中每个文本块，包括开始、结束、处理、判断等。Mermaid中每个节点都有一个id，以及节点的文字表述说明id[文字]矩形节点id(文字)圆形矩形节点id((文字))圆形节点id>文字]右向旗帜状节点id{文字}菱形节点id[[文字]]双边框id[(文字)]圆柱id{{文字}}两边尖尖fill:#333;color:#333;color:#333;fill:none;文字1文字2文字3文字4文字5文字6文字7。
Markdown绘图mermaid实用教程
406156440的博客
11-27 8727
Mermaid 是一个用于画流程图、状态图、时序图、甘特图的库，使用 JS 进行本地渲染，广泛集成于许多 Markdown 编辑器中。 Mermaid 作为一个使用 JS 渲染的库，生成的不是一个“图片”，而是一段 HTML 代码。 点击进入官网 点击进入Github 项目地址 1. mermaid 定义 2. 流程图 语法格式如下: graph LR; # 其中LR指的是方向 A --> B # 不同的箭头表示 #mermaid-svg-VSegGmCvjE0v13e9 .label{fo
markdown图表语法Mermaid介绍
测试开发小记
05-18 5969
Markdown是一种轻量级标记语言，除了编辑文字外，还支持插入图片、表格、公式，它是很流行的一种文档编辑语言，很多博客平台都支持使用Markdown来编辑文章。Markdown还有一个好用的功能是画流程图，基于Mermaid库来渲染流程图，语法比较简洁，本文将介绍Markdown的Mermaid简单使用方法。 目录流程图1. 定义流程图节点及节点名称2. 定义流程图方向3. 节点形状4. 节点连线5. 多节点连接6. 其它类型箭头7. 特殊字符8. 子图时序图类图状态图甘特图饼图 Mermaid 是一个
Markdown-mermaid语法
专注嵌入式系统开发
08-08 1872
基于支持Mermaid语法的Markdown编辑器Typora，使用文本和代码实现图表创建及可视化效果。
Markdown：Mermaid 流程图换行问题
KissedBySnow的博客
01-05 700
n<br><br>
markdown之mermaid
leeshineCSDN的博客
09-10 477
markdown状态转换图和时序图
推荐使用Markdown Preview Mermaid Support：代码块中的生动图表
gitblog_00020的博客
05-19 324
推荐使用Markdown Preview Mermaid Support：代码块中的生动图表 项目地址:https://gitcode.com/mjbvz/vscode-markdown-mermaid 在我们的日常编程工作中，文档和注释是沟通思想的重要工具。Markdown已经成为了轻量级标记语言的首选，然而，仅仅用文本描述流程图或图表有时并不足够直观。这就是Markdown Preview M...
Markdown使用mermaid画流程图
Kobaayyy的博客
01-14 669
Markdown使用mermaid画图参考 参考 码字不易，如果您觉得有帮助，欢迎点赞和收藏~~
mermaid - markdown的mermaid语法解析渲染
weixin_39651356的博客
10-31 897
mermaid - markdown的mermaid语法解析渲染（前端）
Python库 | markdown-mermaid-to-images-0.1.2.tar.gz
03-06
`markdown-mermaid-to-images-0.1.2.tar.gz` 是一个 Python 库，它将 Markdown 文件中的 Mermaid 代码块转换为图像，使得文档在不支持 Mermaid 的环境中也能正常显示。 **Markdown** Markdown 是一种标记语言，由...
markdown mermaid-crx插件
04-02
语言:中文 (简体) markdown-mermaid-plugin Markdown Viewer 插件增强，在该插件的基础上解析markdown文档中mermaid格式的代码块，将其转换为相应的图形展示到页面上。
mermaid:从类似于markdown的文本生成图表和流程图-开源
04-25
mermaid是基于JavaScript的图表和流程图生成工具，它使用markdown启发的文本来快速轻松地生成图表。 不用使用繁重的工具来解释您的代码。 美人鱼以其类似于markdown的简单脚本语言大大简化了文档，并提供了多种图表...
Mermaid Markdown-crx插件
04-02
Mermaid Markdown-crx插件是一款专为Chrome浏览器设计的扩展程序，其主要功能是将使用Mermaid语法编写的文本转化为直观、生动的图表。Mermaid是一种强大的Markdown扩展，它允许用户通过简单的文本语法创建流程图、...
python gradio 的输出展示组件
daxiashangxian的博客
07-18 551
没有输入，点击generate显示了json数据。
智能知识问答-简介
九品神元师
07-22 119
基于LLM大语言模型的知识库问答系统，提供开箱即用的数据处理、模型调用等能力。
MarkDownload
最新发布
m0_53573725的博客
07-23 113
和
Mindoc一款免费好用开源优雅高效的文档管理系统
天天打码-16年老码农
07-18 806
Mindoc 是一个基于 Go 语言开发的开源文档管理系统。它的界面简洁，功能强大，支持Markdown和HTML编辑器，可以存储接口文档、数据库字典、手册说明等。而且，它还有项目管理、用户管理、权限管理等内置功能，满足中小团队的文档管理需求。使用的技术MySQL 5.6editor.md Markdown 编辑器jQuery 库WebUploader 文件上传框架NProgress 库jsTree 树状结构库Font Awesome 字体库Cropper 图片剪裁库。
markdown mermaid
08-25
Markdown Mermaid 是一种在 Markdown 编辑器中使用的库，用于绘制流程图、状态图、时序图和甘特图等。它可以通过在代码块中编写 Mermaid 代码来实现。Mermaid 是一个基于 JavaScript 的库，可以在本地进行渲染。它已经集成到了许多常见的 Markdown 编辑器中，例如 Typora。使用 Markdown Mermaid 可以方便地创建各种图表并将其嵌入到 Markdown 文档中。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [markdown图表语法Mermaid介绍](https://blog.csdn.net/u010698107/article/details/124371850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Markdown绘图mermaid实用教程](https://blog.csdn.net/qq_32460819/article/details/121574296)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

解琛

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值