CSDN Markdown簡明教程4-UML畫畫

0.文件夾

• 文件夾
• 前言
• 序列圖
  • 1 序列圖演示樣例
  • 2 序列圖語法
• 流程圖
  • 1 流程圖演示樣例
  • 2 流程圖語法
    • 節點定義
    • 節點鏈接
• Gravizo
• 聲明

1. 前言

Markdown是一種輕量級的標記語言。把做者從繁雜的排版工做中解放出來，實現易讀易寫的文章寫做，已經逐漸成爲其實的行業標準。CSDN博客支持Markdown可以讓廣大博友更加專一於博客內容，大讚。

但是。很多博友可能對Markdown比較生疏。本博接下來用一個系列文章《Markdown簡明教程》扼要介紹Markdown，但願可以對你們有所幫助。

系列教程文件夾

• 關於Markdown
• Markdown基本使用
• Markdown表格和公式
• Markdown UML圖
• CSDN Markdown高速上手
• Markdown 參考手冊

本文爲《Markdown簡明教程》系列教程的第4篇Markdown UML圖。主要解說Markdown序列圖、流程圖等, 順便爲介紹了無需不論什麼插件的在線繪製UML的Gravizo。

2. 序列圖

2.1 序列圖演示樣例

基於js-sequence-diagrams實現了序列圖。使用下列的格式聲明一個序列圖：

在網頁上解析結果爲：

注意：所有的序列圖代碼需要放在一個語法類型爲sequence的代碼塊中。

如如下代碼所看到的。

2.2 序列圖語法

序列圖的語法例如如下圖所看到的。

詳細來講：

• 設置title，採用title: message。

title: 序列圖標題

將編譯爲：

• 設置participant，採用participant: actor

participant A
participant B

將編譯爲：

• 設置note，
  
  • 左側note： note left of acotor： message
  • 右側note： note right of actor: message,
  • 覆蓋note： note over actor:message

note left of A: 左側note
note right of B: 右側note
note over C: 覆蓋note
note over A,B: 覆蓋多個actor
note over B,C: 測試下\n 換行

將編譯爲：

• 設置會話，
  
  • 實線實箭頭： actor->actor: message
  • 虛線實箭頭： actor–>actor:message
  • 實線虛箭頭： actor->>actor:message
  • 虛線虛箭頭： actor–>>actor:message

A->A:自言自語
 A->B:實線實箭頭
 A-->B:虛線實箭頭
 A->>B:實線虛箭頭
 A-->>B:虛線虛箭頭

將編譯爲：

如下的案例演示了序列圖語法的混合使用。參見代碼：

在網頁上解析以後結果爲：

3. 流程圖

3.1 流程圖演示樣例

CSDN Markdown基於flowchart.js實現流程圖。

一個簡單的流程格式例如如下代碼所看到的：

編譯以後結果爲：

注意：所有的流程圖代碼需要放在一個語法類型爲flow的代碼塊中。如如下代碼所看到的。

3.2 流程圖語法

流程圖繪製包含兩部分：節點定義和節點鏈接。

1. 節點定義

格式例如如下：

節點名稱=>節點類型: 提示文本

• 節點名稱可任意起，甚至支持中文。

  提示文本可以爲英文，可以爲中文，也可以爲空使用默認值。好比：

 st=>start: start
or
 kaishi=>start: 開始
or
 起點=>start: 起點
or
 start=>start

• 節點類型有start、operation、condition、end等。例如如下圖所看到的。

start=>start: 開始
login=>operation: 登錄
isLogin=>condition: 是否已登錄？
test=>operation: 進行測試
end=>end: 結束

2. 節點鏈接

格式例如如下

通常節點鏈接：
 節點->節點
條件推斷節點鏈接：
 條件節點(yes)->正確應答節點
 條件節點(no)->錯誤應答節點

如如下代碼所看到的：

start->isLogin
isLogin(yes)->test
isLogin(no)->login->test
test->end

編譯以後結果爲

接下來作一個複雜的案例。例如如下圖所看到的，請你們思考怎樣實現。

列出源碼供你們參考。

start=>start: 開始
isLogin=>condition: 是否已登陸？
login=>operation: 登錄
selectPic=>operation: 選擇一張圖片
isPic=>condition: 格式是否正確？
doIt=>operation: 完畢資料
isRight=>condition: 資料是否符合要求？
end=>end: 完畢

start->isLogin
isLogin(yes)->selectPic
isLogin(no)->login->selectPic
selectPic->isPic
isPic(yes)->doIt->isRight
isPic(no)->selectPic
isRight(yes)->end
isRight(no)->doIt

4. Gravizo

在研究Markdown UML圖的時候，找到了很多在線繪製UML圖的方式。好比Dot、PlantUML和UMLGraph等方式，並且發現了一個不用使用不論什麼插件就可調用圖片的方式-http://www.javashuo.com/tag/gravizo。

好比。咱們可以使用PlantUML的方式繪製一個用例圖，代碼例如如下。
。

@startuml
left to right direction
skinparam packageStyle rect
actor customer
actor clerk
rectangle checkout {
  customer -- (checkout)
  (checkout) .> (payment) : include
  (help) .> (checkout) : extends
  (checkout) -- clerk
}
@enduml

而後，咱們就可以使用如下代碼調用該圖片：

<img src='http://g.gravizo.com/g? @startuml left to right direction; skinparam packageStyle rect; actor customer; actor clerk; rectangle checkout { customer -- (checkout); (checkout) .> (payment) : include; (help) .> (checkout) : extends; (checkout) -- clerk; } @enduml '>

本文爲《Markdown簡明教程》系列教程的第4篇Markdown UML圖，主要解說Markdown序列圖、流程圖等, 順便爲介紹了無需不論什麼插件的在線繪製UML的Gravizo。下一篇文章咱們來研讀CSDN Markdown的一些特性。

5. 聲明

前端開發whqet，關注前端開發。分享相關資源。csdn專家博客，王海慶但願能對您有所幫助。限於做者水平有限，出錯不免。歡迎拍磚！

歡迎不論什麼形式的轉載。煩請註明裝載，保留本段文字。
本文原文連接。http://blog.csdn.net/whqet/article/details/44281463
歡迎你們訪問獨立博客http://whqet.github.io