Diagram in Web Browser

有的时候，一图胜千言。写文档的时候，如果可以像写代码一样“写”出款图来，那是很好的。

js-sequence

• https://bramp.github.io/js-sequence-diagrams/

  Alice->Bob: Hello Bob, how are you?
  Note right of Bob: Bob thinks
  Bob-->Alice: I am good thanks!
  

有一个手写体（handwritten）的风格。

flowchart.js

• http://flowchart.js.org/

Mermaid

• https://mermaid-js.github.io/mermaid

支持的图标类型：

• Flowchart
• Sequence diagram
• Class diagram
• State Diagram
• Entity Relationship Diagram
• Gantt Chart
• Pie Chart

PlantUML

• http://plantuml.com/

GraphViz

• https://github.com/mdaines/viz.js

builds Graphviz with Emscripten and provides a simple wrapper.

Ditaa

• https://github.com/stathissideris/ditaa

用 ascii 字符画框图，用 Ditaa 转换成图像。

其网站上所举的例子如下：

    +--------+   +-------+    +-------+
    |        | --+ ditaa +--> |       |
    |  Text  |   +-------+    |diagram|
    |Document|   |!magic!|    |       |
    |     {d}|   |       |    |       |
    +---+----+   +-------+    +-------+
        :                         ^
        |       Lots of work      |
        +-------------------------+