前端umi图笔记
typaro文档
js-sequence-diagrams语法
案例一
sequenceDiagram
Title: 这里写标题
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow
案例二
sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end
案例四
sequenceDiagram
participant C
participant B
participant A
Note right of A: By listing the participants\n you can change their order
总结
sequenceDiagram
Title : 标题
A ->> B : 从A到B实线
note right of B: 右侧标注信息
B -->> A : 从B到A虚线
note left of A: 左侧标记信息
Note over A: 在A的中间编辑
Note over A,B: 在A,B之间标记
js-sequence代码编写
js-sequence-diagrams depends on Snap.svg and Underscore.js (or lodash). You can download all these files manually, or use “bower install bramp/js-sequence-diagrams”.
Then include the following HTML:
<script src="webfont.js"></script>
<script src="snap.svg-min.js"></script>
<script src="underscore-min.js"></script>
<script src="sequence-diagram-min.js"></script>
and now you have two options. You can manually parse the text:
<div id="diagram"></div>
<script>
var diagram = Diagram.parse("A->B: Message");
diagram.drawSVG("diagram", {theme: 'hand'});
</script>
or use jQuery to do all the work:
<div class="diagram">A->B: Message</div>
<script>
$(".diagram").sequenceDiagram({theme: 'hand'});
</script>
Flowcharts流程图
flow 格式
```mermaid
flowchat
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op
```
mermaid格式
```mermaid
graph LR
A[Hard edge] -->B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
Gantt Charts 甘特图
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
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page : 20h
Add another diagram to demo page : 48h
Class Diagrams 类别图
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
State Diagrams
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]