Graphviz - 像 MarkDown 一样简单的画思维导图

Graphviz 是 AT&T 开发的一款开源绘图语言，主要用来绘制 UML 图，比如思维导图之类的，语法简单，就像写 Markdown 一样非常流畅、容易。配合 Visual Studio Code 扩展，可以做到边写代码，边预览。@Appinn

来自发现频道@小恐龙的爱，以下为原文：

Graph Visualization 是 AT&T 公司开发的一款开源的绘图编程语言，叫做 dot 语言。官网在这里：https://graphviz.gitlab.io/

它可以绘制 UML 图，比如思维导图什么的。

UML 是 Unified Modeling Language 的缩写，中文名统一建模语言。UML 是一种开放的方法，用于说明、可视化、构建和编写一个正在开发的、面向对象的、软件密集系统的制品的开放方法。UML 并不是一个工业标准，但在Object Management Group的主持和资助下，正在逐渐成为工业标准。

via 维基百科

Graphviz - 像 MarkDown 一样简单的画思维导图 2 — 各式UML

语法有多简单呢：我觉得比 Markdown 还要简单。事实上，到现在我也记不住 Markdown 的语法。

digraph g { a -> {b->c} }

就可以自动生成一个结构图，还可以导出为 svg 图片（一种解释型矢量图片，可以在浏览器中正常显示）。

使用上，你可以下载它的解释库，但是我推荐用 VS Code，安装 Graphviz (dot) language support for Visual Studio Code 扩展。

就是可以像 Markdown 一样，左侧写代码，右侧预览了：

Snipaste_2019-05-06_14-39-45 — 边栏预览快捷键：`ctrl+k v` (Mac: `cmd+k shift+v`)

继续示例：

digraph g {
    rankdir=LR  //方向左右
    dot语言->{简介,语法,示例}
    dot语言[shape=box,fontcolor=red]
    简介[color=red]
    语法[color=green]
    示例[color=blue]
    简介->{开源免费,UML绘图,导出svg}
    语法->{"digraph","graph"}
    "digraph"->导向图[label=可以制作带方向的导图]
    "graph"->无向图[label=可以制作不带方向的导图]
    }

欢迎前往发现频道小恐龙的爱分类，继续参与 Graphviz 的讨论。

11 条留言

昵称 2019/05/07 回复

> 比 Markdown 还要简单
这真的不是黑？

青小蛙 2019/05/07 回复

嗯，要黑一起黑

ilray 2019/05/07 回复

看着不错，有点像科研论文里的编程作图
heroicstirp 2019/05/07 回复

之前一直在用的一款是plantuml，很类似
highwindmx 2019/05/07 回复

快捷键好像是ctrl + shift + k + v ??
huawuya 2019/05/09 回复

plantuml +1
红眼 2019/05/09 回复

Graphviz 有补全工具吗? vscode里面的插件虽然能编写和预览和导出
但是vsc不能舒服的补全
官方的工具也不能甚至预览也有点别扭
typora上能写一些但有点不太一样也是不能补全
周南 2019/05/09 回复

缺乏一个书写工具，所见即所得的可视化工具
正常人不会写这些命令的

markdown只有配合类似的Typora才能真正发挥作用
没有人喜欢用记事本写markdown