JS 实现UML序列图 （二）-- Csdn MarkDown 第七篇 技术篇
上一篇大概说了一下JS是怎么画UML 图形的。
这一篇简单介绍一下这个JS 解析 UML语法是怎么实现的。
https://github.com/bramp/js-sequence-diagrams/blob/master/src/grammar.ebnf
这个是Markdown UML语言的语法结构。摘抄了部分：
这一部分是将词和词组成语句。而语句和语句就组成篇章。
document ::= statement*
statement ::=
( 'title' ':' message
| 'participant' actor
| 'note' ('left of' | 'right of' | 'over') actor ':' message
| actor ( '-' | '--' ) ( '>' | '>>' )? actor ':' message
)
这里的意思是 UML是由 statement（语句）构成的。
statement有下面几种表示方法：
1. ‘title’ ‘:’ message 这里带上”的都是token,在编译原理中，token标识不能再被解释的词。
2. ‘participant’ actor
3. ‘note’ (‘left of’ | ‘right of’ | ‘over’) actor ‘:’ message
表示note与Actor之间的关系
4. actor ( ‘-’ | ‘–’ ) ( ‘>’ | ‘>>’ )? actor ‘:’ message 标识actor之间的关系。
下面的词法分析会将字符转换为UML中有含义的字。类似字符组成词。用正则式将字母变成有含义的词。
/** js sequence diagrams
* http://bramp.github.io/js-sequence-diagrams/
* (c) 2012-2013 Andrew Brampton (bramp.net)
* Simplified BSD license.
*/
%lex
%options case-insensitive
%{
// Pre-lexer code can go here
%}
%%
[\n]+ return 'NL';
\s+ /* skip whitespace */
\#[^\n]* /* skip comments */
"participant" return 'participant';
"left of" return 'left_of';
"right of" return 'right_of';
"over" return 'over';
"note" return 'note';
"title" return 'title';
"," return ',';
[^\->:\n,]+ return 'ACTOR';
"--" return 'DOTLINE';
"-" return 'LINE';
">>" return 'OPENARROW';
">" return 'ARROW';
:[^#\n]+ return 'MESSAGE';
<<EOF>> return 'EOF';
. return 'INVALID';
/lex
%start start
%% /* language grammar */
start
: document 'EOF' { return yy; }
;
document
: /* empty */
| document line
;
line
: statement { }
| 'NL'
;
statement
: 'participant' actor { $2; }
| signal { yy.addSignal($1); }
| note_statement { yy.addSignal($1); }
| 'title' message { 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.getActor($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 { $$ = $1.substring(1).trim().replace(/\\n/gm, "\n"); }
;
%%
例如下面这一句：
[^\->:\n,]+ return 'ACTOR';
就是将不是“->:\n,” 这些字符的多个字组成词，这个词叫做ACTOR.
一般来说终结符也就是类似’note’ 这样的字符需要先被定义。否则 ‘note’这样的字符集合就变成了markdown UML的ACTOR.
而下面的是将ACTOR词转成对象actor。
actor
: ACTOR { $$ = yy.getActor($1); }
;
1
2
3
4
5
A->B: 一句话证明你很寂寞。
Note left of A: thinking
B->B: counting
B>>A: 这句话有一共六十九笔
Note right of X: SB
Created with Raphaël 2.1.2 寂寞是什么 A A C C S S B B 一句话证明你很寂寞。
thinking counting 这句话有一共六十九笔 SB
好吧上面就是UML的grammar. 其实用什么语言都可以写出来。不局限于JS. 具体grammar这块使用的是jison和ebnf.
有闲空的人可以看一下JS调用jison来做js parser以及EBNF表达式。
， 比如吃什么肉其实并不重要，重要的是有肉吃。
是用来修改字号的。不过这个字号只有 
这个就不细说了。
这个图标不要轻易点。嗯.除非你想发狂。
是保存到线上草稿箱中，类似于save. 你可以在后台草稿箱找到保存的。
生成摘要，点击后长这个样子：
点击后长这个样子。没有什么更加详细的描述了。
感觉也很 ** 危险 ** 最好还是不要去点击。
这个是将本地的markdown文件 _ .md变成线上可以编辑的。而 
是将现在线上正在编辑的文字变成 _ .md本地文件或者html 等。
帮助文档就是下面这个样子的。会在右边出现。方便使用。
