使用类似自然人对话方式绘制精美的UML图

欢迎大家来到IT世界,在知识的湖畔探索吧!

Usa->China: Says Hello
Note right of China: China thinks\nabout it
China-->Usa: How are you?
Usa->>China: I am good thanks!

欢迎大家来到IT世界,在知识的湖畔探索吧!

也可以是手写模式

欢迎大家来到IT世界,在知识的湖畔探索吧!Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

# Example of a comment.
Note left of A: Note to the\n left of A
Note right of A: Note to the\n right of A
Note over A: Note over A
Note over A,B: Note over both A and B

欢迎大家来到IT世界,在知识的湖畔探索吧!participant Cparticipant Bparticipant ANote right of A: By listing the participants\n you can change their order

如何实现的呢？

步骤一：设计DSL 领域特定语言，用于描述绘制uml 动作。特定语言如下。

领域特定语言（英语：domain-specific language、DSL）指的是专注于某个应用程序领域的计算机语言。主要作用就是简化用户输入。正常要实现如上uml图需要大量的人工工作，或者硬链接代码。通过DSL后可以非常精炼的画出UML 图。

步骤二：通过Jison 来解析 该语言为javascript

Jison 将上下文无关的语法作为输入，并输出一个能够解析该语法所描述的语言的 JavaScript 文件。然后，您可以使用生成的脚本来分析输入，并根据输入接受、拒绝或执行操作。如果你熟悉Bison或Yacc，或其他类似工具。

/** js sequence diagrams* https://bramp.github.io/js-sequence-diagrams/* (c) 2012-2017 Andrew Brampton (bramp.net)* Simplified BSD license.*/%lex%options case-insensitive%{// Pre-lexer code can go here%}%x title%%[\r\n]+ return 'NL';\s+ /* skip whitespace */\#[^\r\n]* /* skip comments */"participant" return 'participant';"left of" return 'left_of';"right of" return 'right_of';"over" return 'over';"note" return 'note';"title" { this.begin('title'); return 'title'; }<title>[^\r\n]+ { this.popState(); return 'MESSAGE'; }"," return ',';[^\->:,\r\n"]+ return 'ACTOR';\"[^"]+\" return 'ACTOR';"--" return 'DOTLINE';"-" return 'LINE';">>" return 'OPENARROW';">" return 'ARROW';:[^\r\n]+ return 'MESSAGE';<<EOF>> return 'EOF';. return 'INVALID';/lex%start start%% /* language grammar */start: document 'EOF' { return yy.parser.yy; } /* returning parser.yy is a quirk of jison >0.4.10 */;document: /* empty */| document line;line: statement { }| 'NL';statement: 'participant' actor_alias { $2; }| signal { yy.parser.yy.addSignal($1); }| note_statement { yy.parser.yy.addSignal($1); }| 'title' message { yy.parser.yy.setTitle($2); };note_statement: 'note' placement actor message { $ = new Diagram.Note($3, $2, $4); }| 'note' 'over' actor_pair message { $ = new Diagram.Note($3, Diagram.PLACEMENT.OVER, $4); };actor_pair: actor { $ = $1; }| actor ',' actor { $ = [$1, $3]; };placement: 'left_of' { $ = Diagram.PLACEMENT.LEFTOF; }| 'right_of' { $ = Diagram.PLACEMENT.RIGHTOF; };signal: actor signaltype actor message{ $ = new Diagram.Signal($1, $2, $3, $4); };actor: ACTOR { $ = yy.parser.yy.getActor(Diagram.unescape($1)); };actor_alias: ACTOR { $ = yy.parser.yy.getActorWithAlias(Diagram.unescape($1)); };signaltype: linetype arrowtype { $ = $1 | ($2 << 2); }| linetype { $ = $1; };linetype: LINE { $ = Diagram.LINETYPE.SOLID; }| DOTLINE { $ = Diagram.LINETYPE.DOTTED; };arrowtype: ARROW { $ = Diagram.ARROWTYPE.FILLED; }| OPENARROW { $ = Diagram.ARROWTYPE.OPEN; };message: MESSAGE { $ = Diagram.unescape($1.substring(1)); };%%

如下语法文件与 flex、bison 类似。

如需要详细了解，可以查看flex、bison 文档。

只是flex、bison 中辅助函数为 c函数，，

Jison 使用的是JavaScript 函数

安装 Jison

npm install jison -g

git clone git://github.com/zaach/jison.git
cd jison/examples

以一个计算器的dsl 样例

jison calculator.jison

这将在当前工作目录中生成calculator.js。此脚本可用于解析输入文件，如下所示：

echo "2^32 / 1024" > testcalc
node calculator.js testcalc

将会输出 4194304.