Typora——如何画流程图 | mermaid-js

简介: Typora——如何画流程图 | mermaid-js

前言

画图之前一直使用的是processon,奈何文件数不够使用,所以来学习一波mermaid-js

github: https://github.com/mermaid-js/mermaid

docs: https://mermaid-js.github.io/mermaid/#/

内容

流程图

方向

  • TB 从上到下

  • TD 从上到下

  • BT 从下到上

  • RL 从右到左

  • LR 从左到右

节点形状

  • 圆角节点

  • 椭圆节点

  • 子程序节点

  • 圆柱体节点

  • 圆形节点

  • 燕尾式节点

  • 棱形节点

  • 六边形节点

  • 平行四边形节点

  • 反平行四边形节点

  • 梯形节点

  • 倒梯形节点

线条形状

  • 直线

  • 文本线


  • 箭头线

  • 加箭头的文本线


  • 虚线

  • 加文本的虚线

  • 粗线

  • 加文本的粗线

  • 综合案例

文本中添加特殊字符

针对要在文本上添加特殊字符,只需要将文本内容放在双引号中即可

自定义区域

自定义节点样式

学无止境,谦卑而行.

目录
相关文章
|
12月前
|
JavaScript
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床
122 1
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床
|
JavaScript Go Cloud Native
你要是还学不会,请提刀来见 Typora+PicGo+Gitee + node.js 打造个人高效稳定优雅图床 |Go主题月
经过前面两弹的介绍,相信大家对图床都不陌生了吧,但是小魔童觉得这样做法还是不方便,使用 github的仓库来存放图片,如果不能上外网的话是不能展示图片的,自己可以上外网还不行,需要别人上外网才可以看到我文章中的图片,这也太难了
128 0
|
前端开发 JavaScript API
从零开始打造流程图、拓扑图项目【Nuxt.js + Element + Vuex】
通过阿里云云开发平台快速创建初始化应用:Nuxt仓库,打造流程图、拓扑图项目
698 0
从零开始打造流程图、拓扑图项目【Nuxt.js + Element + Vuex】
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
85 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
105 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
78 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
69 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
87 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
79 3