超容易上手 - 用代码写简单流程图

简介: 超容易上手 - 用代码写简单流程图

超容易上手 - 用代码写简单流程图


无意中,看到一个用dot语言写简单流程图,感觉有趣,于是略微了解了下。 复杂的我觉得还是别的工具xmind之类的😂。

超容易操作和理解。

vscode,安装两个插件Graphviz (dot) language support for Visual Studio CodeGraphviz Preview

新建文件demo.dot,输入以下内容

digraph{
  a->b->c;
  b->d->e;
}

Cmd+shift+p调出面饭,输入graph preview,就可以看到流程图了

网络异常,图片无法展示
|

什么是DOT语言

  • DOT语言是一种文本图形描述语言。
  • 它提供了一种简单的描述图形的方法,并且可以为人类和计算机程序所理解。
  • DOT语言文件通常是具有.gv或是.dot的文件扩展名。

主要分为有向图和无向图

就是符号的区别:

有向图就是上面的digraph,里面是->。 无向图就是单纯的graph,里面是--

网络异常,图片无法展示
|

加点样式

统一的样式,在上面直接添加即可。 单个节点的样式,也直接定义。 线的颜色,直接中括号写。 线上文字,也是直接中括号写

digraph{
  /* 统一定义 */
  // rankdir = LR
  fontsize = 10
  label = "图的属性设置"
  // 结点的设置
  node [shape=circle,fontsize=10]
  // 线的设置
  edge [arrowsize= .5]
  /* 单个节点样式 */
  b [style=filled, fillcolor=".7 .3 1.0", color=green, fontsize=10]
  // 线条颜色
  a->b->c->d [color=blue];
  // 线上文字
  b->d[label=备注,fontsize=10];
  c->d;
}

网络异常,图片无法展示
|

其他资料

目录
相关文章
|
JavaScript 前端开发 API
使用Jsmind实现前端流程图功能
使用Jsmind实现前端流程图功能
|
XML 移动开发 前端开发
推荐这几个流程图设计器web开发方案
前沿:一个流程图设计器需要什么?一个是图的绘制能力、基于svg或者canvas来绘制各种形状的节点(矩形、圆形、多边形)以及线,一个是图与图之间的交互包括拖拽,节点之间的连线等,最后是画布面板的便捷性,其中包括:比如ps中的网格功能、对其线、步骤回撤、画布的可伸缩、快捷按钮等等,那前端社区有啥开源解决方案,方便我们快速开发一个属于自己的流程图设计器?
1720 0
推荐这几个流程图设计器web开发方案
|
Web App开发
Mockplus演示和分享原型设计的8种方式
Mockplus目前是国内比较流行的原型设计工具,功能上,相比Axure不算全面和强大,但在不少功能上有它独到之处。 Axure有个比较让人头疼的地方,就是对于移动App项目的预览和演示比较麻烦,而这个方面,Mockplus展现了它的便利。
1264 0
|
开发框架 小程序 IDE
mPaaS 小程序架构解析 | 实操演示小程序如何实现多端开发
mPaaS 小程序开发框架已全面开放,免费接入,欢迎体验。
3332 0
mPaaS 小程序架构解析 | 实操演示小程序如何实现多端开发
|
数据库连接 数据库 网络协议
编程不是功能实现了就可以了
       最近在项目中发现一个事件,功能很简单,也达到了预期的功能效果,但是编程不仅仅是功能实现了就可以了,更应该是如何完美的实现功能。
907 0
|
Go 开发者
Continnue 的介绍和流程图 | 学习笔记
快速学习 Continnue 的介绍和流程图
Continnue 的介绍和流程图 | 学习笔记

热门文章

最新文章