优快云中使用mermaid和flowchart画流程图

原创 已于 2023-01-05 23:38:46 修改 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#文档资料

于 2023-01-05 23:10:36 首次发布
文章介绍了在创建内容时应首选Markdown模式而不是富文本编辑模式。它提供了一个Mermaid图形图表的示例，Mermaid是一种用纯文本定义图形的工具，支持流程图和序列图等，允许用户在文档中嵌入复杂的图表。

首要条件：选markdown模式而非富文本编辑模式
CSND
下载
创造中心
左最下设置
markdown模式

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

mermaid示例

/*注释
···请换成英文格式
mermaid
graph LR
aa–>bb
aa–>cc
···
*/
结果如下图：
aa
bb
cc

flowchart示例

/*
···请换成英文格式
mermaid
flowchat
st=>start: 开始
e=>end: 结束
op=>operation: 我的操作
cond=>condition: 确认？

st->op->cond
cond(yes)->e
cond(no)->op
···
结果如下图：
*/

Created with Raphaël 2.3.0 开始 我的操作 确认？ 结束 yes no
咪咪勺儿
关注
DeepSeek进阶应用（一）：结合Mermaid绘图（流程图、时序图、类图、状态图、甘特图、饼图）
Code_流苏：在代码中寻诗意，在实践中觅真知
03-09 6232
纯干货，DeepSeek结合Mermaid绘制各类图（流程图、时序图、类图、状态图、甘特图、饼图）
一个超实用的工具组合：Mermaid + AI，帮你用写代码的方式轻松画图！
m0_70208894的博客
09-07 1480
一个超实用的工具组合：Mermaid + AI，帮你用写代码的方式轻松画图！
优快云、markdown环境下如何插入各种图（流程图，时序图，甘特图）
fansv587的博客
02-15 1702
在markdown环境下插入流程图、时序图、甘特图
csdn画流程图
a15322910600的博客
10-27 1231
Created with Raphaël 2.3.0开始 /*定义st为start类型的节点，上面写“开始”*/输入aa++
解锁Mermaid图表技能：新手必知的3个关键解决方案
最新发布
gitblog_00541的博客
11-04 558
Mermaid作为基于JavaScript的图表生成工具，能通过类Markdown的文本定义快速创建流程图、序列图等可视化图表，帮助我们解决文档与开发进度不同步的痛点。但很多新手在初次使用时，常因环境配置、渲染异常和版本兼容问题受阻。今天我们就用三招解决这些难题，让你轻松上手这款强大工具。 ## 如何搭建稳定的Mermaid开发环境？ 很多同学反馈刚接触时第一步就卡壳——环境配置总是出问题。别...
流程图
03-31
NULL 博文链接：https://jiaguwen123.iteye.com/blog/1336335
Mermaid系列之FlowChart流程图
StayAlive1887的博客
08-04 4571
2.1 mermaid可以让你使用代码来创建图表和可视化效果。mermaid是一款基于javascript语言的图表工具。```mermaidA [ 长方形 ] -- 链接 -- > B((圆)) A -- > C(圆角矩形) B -- > D {菱形 } C -- > D```fill:#333;color:#333;color:#333;fill:none;链接长方形圆圆角矩形菱形```mermaidgraph LR```
优快云创建流程图的方法——Markdown笔记
小猫咪不可以有烦恼的博客
07-18 1799
如何使用优快云创建流程图 因为优快云文章使用的是Markdown 语言，创建流程图需要用特定的语句，以下是一些创建时的方法及注意点。 如何创建 因为在Markdown中Flowchart流程图和我们用到的流程图一样，所以使用Flowchart流程图 Created with Raphaël 2.3.0开始输入aa++a>100?结束yesno 代码 ```mermaid flowchat /*开始标识*/ st=>start: 开始 /*定义st为start类型的节点，上面写“开始”*/ e
优快云-Mardown-画流程图的两种方法
小肥丸
01-07 779
#mermaid-svg-8KCnxZSneMvhUDXr .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-8KCnxZSneMvhUDXr .label text{fill:#333}#mermaid-svg-8KCnxZSneMvhUDXr .node rect,#mermaid-svg-8KCnxZSneM
mermaid与flowchart.js绘制流程图分支结构试验
realnull的博客
12-03 1748
mermaid与flowchart.js绘制流程图分支结构试验 用解一元二次方程的流程图做试验 mermaid流程图：判断后的流程线应该是从菱形的顶点处出发，这里居然是从从菱形的边上出发，而且流程线不是走直角弯，不完全符合程序设计流程图的标准，没有找到如何解决。 #mermaid-svg-khCpe5aZnH2CaR0M .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fil
【流程图工具的市场现状分析】：当前可用工具的比较和推荐
[【流程图工具的市场现状分析】：当前可用工具的比较和推荐](https://images.wondershare.com/edrawmax/article2023/flowchart-adobe/adobe-illustrator-flowchart.jpg) # 摘要 流程图工具作为一种视觉化分析和设计...
主流程图
05-26
主流程图
(二)设置hexo支持mermaid
机器人视觉感知
04-18 2924
hexo设置支持mermaid
优快云(makedown流程图)
think_self的博客
12-17 1449
对makedown的流程图学习，在csdn中使用makedown，然后如下是我的总结：然后总结是这几个： 1.start 2.end 3.condition 4.operation 4.subroutine 5.inputoutput
流程图的制作
qq_63713157的博客
02-01 3589
【执行方向】：箭头【开始】：圆角矩形【数据输入】：梯形【普通执行环节】：矩形【条件判断环节】：菱形【数据输出】：梯形【结束】：圆角矩形。
绘制流程图
Robin_Pi的博客
02-25 601
文章目录符号规范结构规范路径规范 符号规范 流程图中的每个符号都有着特定含义。画流程图的时候如果弄错了，整幅流程图的专业性就会大打折扣。 结构规范 流程图有三大结构，分别是顺序结构、选择结构和循环结构。 路径规范 除了符号规划、结构规划，绘制流程图过程中还要注意一些约定俗成的路径规划，比如 1）绘制流程图时，为了提高流程图的逻辑性，应遵循从左到右、从上到下的顺序排列。 2）一个流程从开始符开始，以结束符结束。开始符号只能出现一次，而结束符号可出现多次。若流程足够清晰，可省略开始、结束符号。 3）同一流程图内
画流程图
bravezhe的专栏
06-08 1728
看PST代码很多天了,里面的读写流程看懂了,又忘了,再看,再忘,归咎于笔记的不完善与可读性差, 今天开始学习流程图. 下面介绍一下标准程序流程图的符号及使用约定 一,引言 程序流程图(Progran flowchart)作为一种算法表达工具,早已为工国计算机工作者和广大计算机用户十分熟悉和普通使用.然而它的一个明显缺点在于缺乏统一的规范化符号表示和严格的使用规则.最近,国家标准局批准的国家标
使用Mermaid在Markdown中绘制流程图的完整教程
用户无需使用复杂的绘图软件或导入外部图片，只需在Markdown文件中嵌入特定的Mermaid代码块，即可自动生成清晰、规范的流程图。这种机制不仅提升了文档的可维护性，还确保了版本控制的一致性——图形与文本同步更新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值