從零開始設計技能樹: 使用Graphviz創建模型

時間 2019-11-11

原文原文鏈接

在開始設計新的技能樹——Sherlock的同時，結合一下原有的技能樹，說說如何去設計，新的技能樹還很醜。前端

Graphviz

Graphviz （英文：Graph Visualization Software的縮寫）是一個由AT&T實驗室啓動的開源工具包，用於繪製DOT語言腳本描述的圖形。它也提供了供其它軟件使用的庫。Graphviz是一個自由軟件，其受權爲Eclipse Public License。其Mac版本曾經得到2004年的蘋果設計獎。node

一個簡單的示例代碼以下:git

graph example1 {
    Server1 -- Server2
    Server2 -- Server3
    Server3 -- Server1
}

執行編譯後:github

dot -Tjpg lz.dot -o lz.jpg

就會生成下面的圖片ide

接着咱們即可以創建一個簡單的模型來構建咱們的技能樹。工具

簡單的技能樹

先以JavaScript全棧做一個簡單的示例，他們可能存在下面的依賴關係:網站

"JavaScript" -> "Web前端"
"HTML" -> "Web前端"
"CSS" -> "Web前端"
"Web前端" -> "Web開發"
"JavaScript" -> "Node.js" -> "Web服務端"
"SQL/NoSQL" -> "Web服務端"
"Web Server-Side" -> "Web開發"

即Web前端依賴於JavaScript、HTML、CSS，而Node.js依賴於JavaScript，固然咱們也須要數據的支持，大部分的網站都是數據驅動型的開發。而構成完成的開發鏈的則是前端 + 服務端。spa

因而咱們有了這張圖:設計

而咱們的代碼是這樣的:code

cdigraph tree
    {
        nodesep=0.5;
        charset="UTF-8";
        rankdir=LR;
        fixedsize=true;
        node [style="rounded,filled", width=0, height=0, shape=box, fillcolor="#E5E5E5", concentrate=true]
        "JavaScript" ->"Web前端"
        "HTML" -> "Web前端"
        "CSS" -> "Web前端"
        "Web前端" -> "Web開發"
        "JavaScript" -> "Node.js" -> "Web服務端"
        "SQL/NoSQL" -> "Web服務端"
        "Web服務端" -> "Web開發"
    }

上面舉出的是一個簡單的例子，對應的咱們能夠作一些更有意思的東西，好比將dot放到Web上，詳情見下一篇。