手机网站内容管理,摄影公司网站,怎么做黑彩黑彩网站,如何做收费网站目录
高效工作流#xff1a;用Mermaid绘制你的专属流程图
一、流程图的使用场景
1.1、流程图flowChart
1.2、使用场景
二、如何使用mermaid画出优雅的流程图
2.1、流程图添加图名
2.2、定义图类型与方向
2.3、节点形状定义
2.3.1、规定语法
2.3.2、不同节点案例
2.…目录
高效工作流用Mermaid绘制你的专属流程图
一、流程图的使用场景
1.1、流程图flowChart
1.2、使用场景
二、如何使用mermaid画出优雅的流程图
2.1、流程图添加图名
2.2、定义图类型与方向
2.3、节点形状定义
2.3.1、规定语法
2.3.2、不同节点案例
2.4、节点连线
2.5、子图与多流程图互操作
2.5.1、多流程图且相互影响
2.5.2、子图的方向
2.6、定义节点类
三、Vue3中如何导入mermaid
3.1、下载并安装mermaid组件
3.2、导入并初始化mermaid流程图
四、mermaid绘制流程图的优缺点
五、总结 作者watermelo37 涉及领域Vue、SpingBoot、Docker、LLM、python等 --------------------------------------------------------------------- 温柔地对待温柔的人包容的三观就是最大的温柔。 --------------------------------------------------------------------- 如果您希望直接访问Vue3导入mermaid的代码可以直接访问三、Vue3中如何引入mermaid
高效工作流用Mermaid绘制你的专属流程图
一、流程图的使用场景
1.1、流程图flowChart 流程图是对某一个问题的定义、分析或解法的图形表示图中用各种符号来表示操作、数据、流向以及装置等。使用图形表示算法的思路是一种极好的方法因为千言万语不如一张图。通常用于计算机科学、业务流程设计、工程等领域。 电灯修理思路流程图
1.2、使用场景 流程图使用场景非常广泛如软件开发、项目管理、工作流程、科学研究、制造和生产等。
二、如何使用mermaid画出优雅的流程图
2.1、流程图添加图名 在最上方添加如下内容
---
title: Your flow chart title
--- 例
---
title: test model
---
flowchart LR
A[input] -- B[peocess]
B -- C[output1]
B -- D[output2] 2.2、定义图类型与方向 flowchart代表定义为流程图流程图的方向定义在flowchart旁边支持四种方向分别是top、bottom、left和right的缩写比如LR就是从左到右。还有TBTDtop to down、BTDT不行、LR、RL。 例
---
title: test model
---
flowchart TB
%% flowchart BT
%% flowchart LR
%% flowchart RL
A[input] -- B[peocess]
B -- C[output1]
B -- D[output2] 2.3、节点形状定义
2.3.1、规定语法 mermaid中定义节点形状用的是不同类型的括号每一种括号都对应着一种节点形状。这个特性让mermaid成为目前最简单易用的流程图之一也同样限制了mermaid的灵活度和上限。
圆角矩形节点(节点名)两端是半圆的矩形节点([节点名])矩形套矩形子程序形状节点[[节点名]]圆柱形数据库形状节点[(节点名)]圆形节点((节点名))旗帜形节点节点名]菱形节点{节点名}六边形节点{{节点名}}平行四边形[/节点名/]反向平行四边形[\节点名\]梯形[/节点名\]倒梯形[\节点名/]双环圆(((节点名)))
2.3.2、不同节点案例
---
title: test model
---
flowchart TB
A(节点名1)
B([节点名2])
C[[节点名3]]
D[(节点名4)]
E((节点名5))
F节点名6]
A -- H{节点名7}
B --I{{节点名8}}
C --J[/节点名9/]
D --K[\节点名10\]
E --L[/节点名11\]
F --M[\节点名12/]
F --N(((节点名13))) 2.4、节点连线 mermaid中定义节点连线用的是预定义的符号组合每一种都对应着一种连线形状。这个特性让mermaid成为目前最简单易用的流程图之一也同样限制了mermaid的灵活度和上限。 需要注意的是mermaid所使用的连接线是贝塞尔曲线你可以修改连线的样式、首段、末端但是却不能直接改变线的走向哪怕只是从曲线变成折线。
带箭头的连线A--B不带箭头连线A --- B带文本的连线A--文本内容---B/A---|文本内容|B如果要箭头就将最后一个-变成两种表示方法一样虚线A-.-B虚线带文本A-. 文本内容 .- B粗线A B粗线带文本A 文本内容 B隐藏连线可以用来控制节点位置A ~~~ B其他箭头A --o B末端为圆形、A --x B末端为星形双箭头A--B、A o--o B、A x--x B
2.5、子图与多流程图互操作
2.5.1、多流程图且相互影响 在父图中定义子图之间的联系通过subgraph定义子图及子图中的内容。
flowchart TBc1--a2subgraph onea1--a2endsubgraph twob1--b2endsubgraph threec1--c2end2.5.2、子图的方向 在子图中通过direction定义方向其他的不变。
flowchart LRsubgraph TOPdirection TBsubgraph B1direction RLi1 --f1endsubgraph B2direction BTi2 --f2endendA -- TOP -- BB1 -- B2 2.6、定义节点类 这是三种节点的类定义 classDef inputData fill:#fff8f8,stroke:#000,stroke-width:2px; classDef outputData fill:#b9e6d3,stroke:#000,stroke-width:2px; classDef process fill:#07689f,stroke:#000,stroke-width:2px; classDef用来声明第二个是类名fill是设置填充的颜色stroke是边框颜色stroke-width是边框宽度。使用的话用三个连续的英文冒号即可如A[1]:::inputData -- B[2]:::process
graph TD
%% 定义节点样式classDef inputData fill:#fff8f8,stroke:#000,stroke-width:2px;classDef outputData fill:#b9e6d3,stroke:#000,stroke-width:2px;classDef process fill:#07689f,stroke:#000,stroke-width:2px,color:#fff;%% 节点定义A1[数据1]:::inputData -- B1[/过程1/]:::processA2[数据2]:::inputData -- B1B1 -- C1[数据3]:::outputDataB1 -- C2[数据4]:::outputDataB1 -- C3[数据5]:::outputDataC1 -- D1[数据3]:::inputDataC2 -- D2[数据4]:::inputDataF1[数据6]:::inputData -- E1D1 -- E1[/过程2/]:::processD2 -- E1E1 -- G1[数据7]:::outputDataE1 -- G2[数据8]:::outputDataG1 -- H1[数据7]:::inputDataH1 -- I1[/过程3/]:::processI1 -- J1[数据9]:::outputDataI1 -- J2[数据10]:::outputDataI1 -- J3[数据11]:::outputDataI1 -- J4[数据12]:::outputDataI1 -- J5[数据13]:::outputData 效果如下 三、Vue3中如何导入mermaid
3.1、下载并安装mermaid组件 npm install mermaid 3.2、导入并初始化mermaid流程图
templatediv classcontainerpre classmermaid{{ mermaidCode }}/pre/div
/templatescript setup
import mermaid from mermaid; //引用mermaid
import { onMounted, ref } from vue;const mermaidCode ref(
graph TD;A--B;A--C;B--D;C--D;
);onMounted(() {mermaid.initialize({ startOnLoad: true });mermaid.init();
});
/script四、mermaid绘制流程图的优缺点 优点很简单太简单了好学支持vue3语义化极强所见即所得除了空格写的每一个mermaid语法的符号都有作用。 同时支持在线绘制Online FlowChart Diagrams Editor - Mermaid Live Editor 缺点也很明显预定义较多自定义不足上手快但是用起来死板。而且mermaid生成的是svg图像初始状态无法保存为图片无法点击拖拽等交互甚至连缩放都做不到。 此外从上图已经可以看出来了稍微复杂一点的结构或者节点自定义mermaid表现出来的流程图就已经有点丑了。而且柔滑的贝塞尔曲线看起来非常不专业从来没在论文里面见过弯曲连线的流程图
五、总结 mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。 博客不应该只有代码和解决方案重点应该在于给出解决方案的同时分享思维模式只有思维才能可持续地解决问题只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助麻烦您点个赞支持一下还可以收藏起来以备不时之需有疑问和错误欢迎在评论区指出~ 其他热门文章请关注 极致的灵活度满足工程美学用Vue Flow绘制一个完美流程图 你真的会使用Vue3的onMounted钩子函数吗Vue3中onMounted的用法详解 通过array.filter()实现数组的数据筛选、数据清洗和链式调用 通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能 通过MongoDB Atlas 实现语义搜索与 RAG——迈向AI的搜索机制 TreeSize免费的磁盘清理与管理神器解决C盘爆满的燃眉之急 el-table实现动态数据的实时排序一篇文章讲清楚elementui的表格排序功能 深入理解 JavaScript 中的 Array.find() 方法原理、性能优势与实用案例详解 MutationObserver详解案例——深入理解 JavaScript 中的 MutationObserver Dockerfile全面指南从基础到进阶掌握容器化构建的核心工具 在线编程实现如何在Java后端通过DockerClient操作Docker生成python环境 干货含源码如何用Java后端操作Docker命令行篇
