tree.dot

digraph tree
{
    nodesep=0.5;
    charset="UTF-8";
    rankdir=LR;
    fixedsize=true;
    compound=true;
    node [style="rounded,filled", width=0, height=0, shape=box, fillcolor="#E5E5E5", concentrate=true]

    subgraph cluster_2 {
        label = "网站前端";
        "JavaScript"
        "HTML"
        "CSS"
    }

    subgraph cluster_0 {
        label = "编程语言";
        "Node.js"
        "HTML"
        "SQL/NoSQL"
        "Java"
        "C#"
        "Ruby"
        "Python"
        "Scala"
        "CSS"
    }

    "Java" -> "编程语言"[ltail=cluster_0]

    subgraph cluster_1 {
        label = "测试";
        "Mock"   
        "Stub" 
        "Unit"
    }

    "Mock" -> "测试"
    "Stub" -> "测试"
    "Unit" -> "测试"

    "编程语言" -> "CGI"
    "CGI" -> "Web Server-Side"

    "JavaScript" -> "Web Front-End Design"
    "HTML" -> "Web Front-End Design"
    "CSS" -> "Web Front-End Design"

    "Graphic Design" -> "Prototype UI" -> "Product Prototype"
    "User Discovery" -> "Prototype Discovery" -> "Product Prototype"
    "Web Front-End Design" -> "Web Development"
    "浏览器兼容性" -> "Web Front-End"
    "Product Prototype" -> "Web Development"
    "SEM" -> "Web Development"

    subgraph cluster_8 {
        "Web Server-Side"
        "Web Front-End"
    }

    "CSS" -> "CSS Tools"
    "Node.js" -> "Web Server-Side"[ltail=cluster_0]
    "JavaScript" -> "JS库/框架使用" 

    "SQL/NoSQL" -> "Database" -> "DBMS" -> "Web Server-Side"

    "APIs" -> "Web Server-Side"
    "APIs" -> "Web Front-End"
    "Web Server-Side" -> "Web Development"
    "Web Front-End" -> "Web Development"

    
    "编程语言" -> "设计模式" -> "领域模式"
    "编程语言" -> "测试"
    "测试" -> "TDD" -> "自动化测试"
    "测试" -> "重构"
    "测试" -> "自动化测试" -> "Web Development"
    "编程语言" -> "Clean Code"
    "Clean Code" -> "重构"
    "重构" -> "TDD"
    "分析" -> "SEO" -> "SEM"
    "编程语言" -> "程序语言设计" -> "DSL"
    "元编程" -> "DSL"
    "DSL" -> "领域模式"

    subgraph cluster_3 {
        label = "IDE";
        "Eclipse"
        "RubyMine"
        "Intellij IDEA"
        "PyCharm"
        "WebStorm"
        "Android Studio"
    }

    subgraph cluster_4 {
        "IDE"
        "Editor"
    }

    subgraph cluster_5 {
        label = "God";
        "Vim"
        "Emacs"
    }

    "Vim" -> "Editor"
    "Emacs" -> "Editor"

    "RubyMine" -> "IDE" [ltail=cluster_3 lhead=cluster_4];

    
    "Editor" -> "Tools"
    "IDE ShortCut" -> "Tools"
    "IDE" -> "Tools"
    "Debuger" -> "Tools"
    "Compiler" -> "Tools"

    subgraph cluster_6 {
        label = "构建工具";
        "Gradle"
        "Rake"
        "Buildr"
        "Make"
        "Scons"
    }

    subgraph cluster_7 {
        label = "版本工具";
        "SVN"
        "git"
    }
    "apk、pip、npm、gem、maven" -> "包管理" -> "部署"
    "SVN" -> "版本管理"
    "git" -> "版本管理" -> "构建"
    "Bamboo" -> "CI" -> "包发布"
    "Gradle" -> "构建工具"[ltail=cluster_6]
    "构建工具" -> "构建"
    "构建" -> "包发布"
    "部署" -> "自动部署"
    "包管理" -> "包发布" -> "自动部署"
    "CLI" -> "部署"
    "脚本语言(Bash,Perl,Ruby,Python etc)" -> "部署"
    "脚本语言(Bash,Perl,Ruby,Python etc)" -> "构建"
    "*nix" -> "软件编译" -> "部署"
    "构建" -> "软件编译"

    "Web Development" -> "Mastery Web Developer"
    "自动部署" -> "Mastery Web Developer"
    "领域模式" -> "Mastery Web Developer"
    "领域知识" -> "Mastery Web Developer"
    "Tools" -> "Mastery Web Developer"

}