Blog

Blog

PHODAL

从零开始设计技能树: 使用Graphviz建立模型

从零开始设计技能树: 使用Graphviz建立模型

在开始设计新的技能树——Sherlock的同时,结合一下原有的技能树,说说如何去设计,新的技能树还很丑。

Sherlock
Sherlock

Graphviz

Graphviz (英文:Graph Visualization Software的缩写)是一个由AT&T实验室启动的开源工具包,用于绘制DOT语言脚本描述的图形。它也提供了供其它软件使用的库。Graphviz是一个自由软件,其授权为Eclipse Public License。其Mac版本曾经获得2004年的苹果设计奖。

一个简单的示例代码如下:

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

执行编译后:

dot -Tjpg lz.dot -o lz.jpg

就会生成下面的图片

lz
lz

接着我们便可以建立一个简单的模型来构建我们的技能树。

简单的技能树

先以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,当然我们也需要数据的支持,大部分的网站都是数据驱动型的开发。而构成完成的开发链的则是前端 + 服务端。

于是我们有了这张图:

Tree
Tree

而我们的代码是这样的:

    digraph 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上,详情见下一篇。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签