2018-05-17-OAA-一種mermaid腳本驅動的軟件項目模塊圖形化表述思路

---

layout: post
title: 2018-05-17-OAA-一種mermaid腳本驅動的軟件項目模塊圖形化表述思路
key: 20180517
tags: OAA flow chart sequence diagram 泳道圖 時序圖 圖表 OAA PM Master
modify_date: 05-17
---

OAA-一種mermaid腳本驅動的軟件項目模塊圖形化表述思路

說明：

• 本文發佈於: gitee,github,博客園
• 轉載和引用請指明原做者和鏈接及出處.

正文：

• 說明：這裏記錄瞭如何使用mermaid腳本語言來做圖，從而更清晰明瞭的表述軟件項目的模塊關係及信令數據交互流程，做爲軟件工程和管理的一種必備手段和方法論建議。

OAA

目的

• 「OAA」即「One Picture Above All」，含義是「一張圖，勝千言」。
• 咱們指望用腳本語言來畫圖，並方便觀看，而圖是描述信令流和數據流的好方法。
  • 咱們只考慮兩種圖：「flow chart」流程圖和「sequence diagram」時序圖（也叫「泳道圖）。
    • 「flow chart」：描述組網拓撲結構和模塊實體間的關係；
    • 「sequence diagram」：描述多個網元之間回合制的信令和數據交互的時序信息；
  • 結合使用這兩張圖，通常就能描述絕大多數的工程和項目場景。
• 用mermaid腳本語言還有格外的好處以下：
  • 腳本語言，容易編輯和維護，比二進制的諸如word/powerpoint，及圖形JPG要方便；
  • 基於字符串，方便合併，觀察，版本維護，放入GIT/SVN很是的小；
  • 文件小，方便隨意的黏貼，拷貝，交互，傳輸，討論和修改；
• 總之，OAA是一種態度和方法論，用不用隨你項目和人力而定，建議使用；

說明

• 本項目是做爲腳本做圖語言mermaid的一個使用的例子，方便使用者繼續創做腳本圖；
• 信息：
  • mermaid官網；
  • mermaid在線測試
  • mermaid源碼@github（惋惜的是release發佈到7.0.0只有就沒了，做者彷佛不在github維護了！）
  • mermaid源碼@https://unpkg.com/mermaid@xxx/dist/，請自行選擇版本；
    • 其中「dist」目錄用於JS當中的CDN方式引用「mermaid.min.js」等；
    • 其中「src」目錄用於查看源碼（好比github上不維護的版本新！已經到了8.X版本了！）
    • 另外，源碼中做者用scss的格式存放可編譯的css的源碼，scss文件能夠經過指定的編譯器生成爲目標css。
  • CDN調用方式以下：

<script src="https://unpkg.com/mermaid@8.0.0-rc.8/dist/mermaid.min.js"></script>

使用

• 請從OAA@Gitee項目查看具體狀況，建議項目經理PM或敏捷開發Master能夠了解下。

Example

• 詳見具體上面開源項目

END