GraphViz 使用教程-用代码生成有向图。并介绍流程图、时序图等绘图工具

GraphViz 图形工具使用教程综合篇

• GraphViz简述
• GraphViz基本元素
• • 生成一个有向图
  • node属性、edit属性和subgraph的使用
• 如何安装GraphViz
• GraphViz工具
• • dot命令行调用
  • 配置Sublime支持图片预览
  • web端在线生成图片
  • 桌面端应用
• 其他图象化工具
• • 在线绘图工具
• 延展阅读

GraphViz简述

GraphViz是一个使用DOT编程语言生成有向图，无向图等图象的工具。 如果只是偶尔使用，可以在本地先定义好关系，使用web浏览器在线生成关系图。

GraphViz基本元素

• (N) node 节点
• (E) edge 线
• (G) graph 图
• (S) subgraph 子图
• ? cluster subgraphs 子图群

生成一个有向图

第一步，定义关系如下：

第二步，给定义好的关系起个名字，一个有向图定义完成

web端在线生成图片

在线生成有向图：http://graphviz.herokuapp.com/
你也可以搭建自己专用的webgraph编辑器，git仓库地址：
https://github.com/Potherca/GraphvizWebEditor
克隆到网站目录下执行composer install便可以使用。

其他图象化工具

• PlantUML – 时序图，用例图，类图，组件图，等程序架构图绘制工具（PlantUML可以以jar包的方式运行，底层调用GraphViz生成图象）
• D3 vs G2 vs Echarts – javascript前端绘图工具
• Neo4j – NOSQL图形数据库
• Xmind – 脑图工具

在线绘图工具

• ProcessOn https://www.processon.com/
• 百度脑图 http://naotu.baidu.com/
• draw.io https://www.draw.io/
• Zen Flowchart http://www.zenflowchart.com/
• https://www.gliffy.com/

延展阅读

http://www.graphviz.org/documentation/

https://renenyffenegger.ch/notes/tools/Graphviz/examples/index

https://www.zhihu.com/question/32098665

https://mp.weixin.qq.com/s/YaEMA9gw2Uz9IdZIl0UAHw

来源：youwen21