無標題文檔

Mermaid,一个生成结构图的工具

以前在设计软件架构的时候免不了使用 Visio 、OmniGraffle 等这样的工具来生成结构图。

它们普遍有个缺点,「成也 GUI、败也 GUI」。就是无法将自己想法比较直观的直接使用文本来输出,有时候看似鼠标点点拖拖所见即所得,然而思路就在这时候被一闪而过。

说到这里,有可能你会想到使用 Graphviz 等文本图形描述语言来生成结构图。它的确很好用,但是无法直接嵌入到 Web 中。通常做法就是使用 Graphviz 生成图片以后,上传到 Web 然后再插入到页面。

文档和图其实都是内容,我们不应该因为排版的问题耗费太多的时间,精力应该更加专注到内容本身。

说了那么多,这就是我推荐 Mermaid 初衷

Generation of diagram and flowchart from text in a similar manner as markdown.

多种类型的图表

目前 Mermaid 成熟的结构图模块可以生成 流程图、序列图以及甘特图。它们生成的语法很简单,例如以下的例子:

流程图

使用源代码

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

就可以生成以下的流程图

flowchart

序列图

使用以下的序列图定义

sequenceDiagram
    participant Alice
    participant Bob
    Alice->John: Hello John, how are you?
    loop Healthcheck
        John->John: Fight against hypochondria
    end
    Note right of John: Rational thoughts <br/>prevail...
    John-->Alice: Great!
    John->Bob: How about you?
    Bob-->John: Jolly good!

就可以生成以下的序列图

sequence

甘特图

使用以下的甘特图定义:

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d
        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

就可以生成如下的甘特图。

gantt

如果你还是感觉压力,可以尝试使用在线编辑器去感受下

Markdown 集成

Mermaid 很方便和 Markdown 集成使用,甚至类似的代码段以后的嵌入即可以使用:

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

Markdown 加载了 Mermaid 插件以后,解析器会自动将代码块中的代码渲染为 SVG 格式的结构图。

gitbook 集成

如果您习惯使用 gitbook 编写技术文档,那么 Mermaid 会让你事半功倍。只需要在 package.json 中加入对应的 devDependencies 就可以直接使用。

  "devDependencies": {
    "gitbook-cli": "^2.3.2",
    "mermaid": "^8.0.0-rc.6",
    "..."
  }

使用 CSS 自定义样式

Mermaid 使用 JavaScript 编写并使用 SVG 输出,因此天生自带了 Web 相关的属性。可以很方便的使用 CSS 定义对应的样式类(Style CSS)来自定义样式。

架构简单便于扩展

Mermaid 只是个结构图的生成引擎,如果你想让它生成其他的结构图,那么可以花点时间来扩展它。简单的说,扩展 Mermaid 生成结构图只需要两个因素:语法定义、以及图形绘制逻辑。

在这里有个比较简单的介绍如何扩展 Mermaid,当然你也可以参考现成的结构图源代码来对比输出。

新项目

Mermaid 是个比较新的工具,功能和文档都在不断的完善中。我发起了个 Mermaid 中文文档翻译计划,目前基本的文档都已经翻译完成,可以在这里阅读。

如果您有任何的意见或者建议,也欢迎您不吝提出。

- eof -

upyun-cli.py,又拍云的命令行工具

截图

其实这是个填坑的项目,两年了我终于把当时留下的坑给填上了,但愿这迟来的不会太迟。

事情是两年前 又拍云 做了个活动,大概是为又拍云开发第三方应用就可以获得不定的流量。由于我的博客一直用的是又拍云的资源服务,自然这个活动对于我而言是很有诱惑力的。

又拍云 其实已经是非常老的老朋友了,往前可以追溯到又拍在线图片服务时期。凭借多年的图片处理以及运维经验,我个人从 12 年使用到现在没有出现过任何的问题,对于又拍云的服务自然是非常的信赖。

对于老用户也是相当的信任,那个活动我其实并没有开始针对又拍云的 SDK 开发任何的小项目,只是报了个名,他们就将不菲的流量资源(T 级别,多到个人博客根本用不完)已经给到我了。

其实我是个极其懒惰的人,自然这件事情就因为各种琐事给忘在脑后了。直到近期我翻阅 github 项目的时,发现 Star 的项目中,为数不多的项目还在持续的更新,这里就有又拍云的 Python SDK

有些触动,不仅仅是因为 又拍云 那种默默实打实做实事的态度,同时也是为了我自己的懒惰感到非常的惭愧。

言归正传,我自己也荒废了 Python 语言多年,刚好可以拿这个 SDK 练练手,所以就有了这个小项目。

有些惭愧没使用 Python 做过实际项目多年,发现 Python 这门语言的发展还是很快的,非常适合短平快的些项目的开发。

现在的 Python 已经过了阵痛期,如果你还在问是选择 Python2 还是 Python3 这些月经性的问题,这里我建议如果没有历史包袱那么就直接使用 Python3 开始吧。

回到 upyun-cli.py ,除了使用 Upyun SDK,还使用了些目前很流行的模块,例如 clickcoloramapyaml 等。

当然这个小脚本还没有大到需要分模块的地步,因此我将所有的代码都集中在一个文件,也同时是为了方便部署使用。

最后废话不多说,还是抛砖引玉直接看代码吧。

作为 Python 新手,我很期待有经验的同学能够给我些更多的建议 :^)

我常用的 Mac 应用(2014)

上次盘点了下我常用的 iOS 应用,那么这次就盘点下我常用的 Mac 应用吧。个人主要用 Mac 来作应用开发以及一些日常事物,所以偏向开发类的工具多一些。

注:有部分软件是收费应用,由于售价实在无法接受以及国内的情况,在这里向原作者表示惭愧,同时再尽可能的情况下我会付款的。

Home Brew

可以说没有这应用我将少活好几年,感谢他节省了我不少的时间。

Chrome、Firefox、Safari

Chrome 是日常最常用的,同时目前的形式看来调试开发也越来越方便,而 Firefox 是备选。个人感觉在 Mac 下 Firefox 的性能不如 Chrome 甚至 Safari 要好。

鼠须管

拼音输入法,强烈推荐下。不过这个应用的配置可能不适合普通用户,普通用户就推荐使用百度输入法吧。

IntelliJ IDEA 社区版

对比上面说的 Home Brew,同时还要感谢 JetBrains 这家公司。IntelliJ IDEA 从 9.0 版本一直用到目前的 13.0,对比我此前对于 IDE 的抵触实在是感到惭愧。

WebStorm / PHPStorm

爱屋及乌吧,因为使用了 IntelliJ IDEA 以后也开始尝试 JetBrains 公司的其他 IDE,发现其他两个 IDE 也非常棒。这是两个收费的 IDE,但它的确值这个价钱。

MacVim

老朋友,自然不解释。

Mou

一个 Markdown 的编辑器,免费而且足够好用。我的这篇文章就是用这个编辑器打出的,感谢作者。

SourceTree

图形化的管理 Git 项目,有多种平台可以选择。在「偷懒」不想使用控制台的情况下使用 Git 是最方便的工具了,同时它还支持 Git Flow 非常的难得。

CodeBox

收集代码片段的工具,从 App Store 上下载的。应该有比这更好的工具,请您告知。

CodeRunner

代码片段测试工具,用它同样节省了不少的时间。

Sublime Text

也是个很流行的编辑器,但个人只是将其作为备用编辑器。

Photoshop CS6

这个就不解释了。

QQ for Mac

这个也不解释了,只是吐槽下最新版本的 QQ 集成的那个截图工具让我很反感。

Twitter for Mac

用来用去还是「官方」的吧。

Xee3

花了三美金入的,绝对值这个价格的看图软件。

1Password4

密码管理工具,能够改变你使用账户的习惯。虽然是收费软件,但还是想说它也值这个价钱。

阿里旺旺 for Mac

不吐槽了,只是觉得有总比没有好吧。

EverNote、圈点

很少记录些东西,同时对同步的需求也不大,不过的确是同类软件中做得最好的。

Alfred

说了那么多,入过不提这个恐怕有点过份,强烈推荐。用过的都说好。

Caffeine

防止机子休眠的小工具

CleanMyMac 2

清除部分缓存文件和垃圾,其实个人感觉没多大用处,但好歹算是个安慰剂吧。PS,原价比较贵但是它会经常搞低价打折。

Dropbox

嗯,大名鼎鼎的同步和备份工具,在国内的线路不是很好,但总有解决办法的 :)

Keka

强烈推荐的解压缩工具,虽然图标不是很好看。

Thunder(迅雷 for Mac)

Mac 平台下的迅雷比 Windows 下的清爽多了,而且该有的功能都有。

噢,你说怎么没有视频以及其他娱乐类的应用了?不好意思,已经很久没有在本地看视频了。最后,贴下桌面(似乎也很久没更换桌面图片了):

ScreenShot

-- eof --

我的照片

嗨!我叫「明城」,八零后、码农、宁波佬,现居杭州。除了这里,同时也欢迎您关注我的 GitHubTwitterInstagram 等。

这个 Blog 原先的名字叫 Gracecode.com 、现在叫 「無標題文檔」 。 要知道作为码农取名是件很难的事情,所以不想在取名这事情上太费心思。

作为八零后,自认为还仅存点点可能不怎么被理解的幽默感,以及对平淡生活的追求和向往。 为了避免不必要的麻烦,声明本站所输出的内容以及观点仅代表个人,不代表自己所服务公司或组织的任何立场。

如果您想联系我,可以发我邮件 `echo bWluZ2NoZW5nQG91dGxvb2suY29tCg== | base64 -d`

分类

搜索

文章