Testing the library which claims to be the markdown for graphs. Verdict: nice work, but styling nodes is tedious.

mermaid_test.html

<style type="text/css">
svg {
  border: 1px #999 solid;
  margin: auto;
}
foreignobject>div {
  font-family: Avenir Next, Avenir, sans-serif;
  font-size: 11pt;
}
</style>

<script type="text/javascript" src="https://cdn.rawgit.com/knsv/mermaid/master/dist/mermaid.min.js"></script>
<script type="text/javascript">mermaid.initialize({ startOnLoad: true });</script>

<div class="mermaid">  
graph LR
    classDef c1  fill:#c7ddec,stroke-width:2,stroke:#1f77b4;
    classDef c2  fill:#ffdfc2,stroke-width:2,stroke:#ff7f0e;
    classDef c3  fill:#cae7ca,stroke-width:2,stroke:#2ca02c;
    classDef c4  fill:#f4c9c9,stroke-width:2,stroke:#d62728;
    classDef c5  fill:#e4d9ee,stroke-width:2,stroke:#9467bd;
    classDef c6  fill:#e2d4d2,stroke-width:2,stroke:#8c564b;
    classDef c7  fill:#f8ddef,stroke-width:2,stroke:#e377c2;
    classDef c8  fill:#dfdfdf,stroke-width:2,stroke:#7f7f7f;
    classDef c9  fill:#eeeec7,stroke-width:2,stroke:#bcbd22;
    classDef c10 fill:#c5eef3,stroke-width:2,stroke:#17becf;
    classDef c11 fill:#c7ddec,stroke-width:2,stroke:#1f77b4;
    classDef c12 fill:#ffdfc2,stroke-width:2,stroke:#ff7f0e;
    classDef c13 fill:#cae7ca,stroke-width:2,stroke:#2ca02c;

    A[Square Rect] -- Link text --> B((Circle))
    A --> C(Round Rect)
    B --> D{Rhombus}
    C --> D
    class A c1;
    class B c2;
    class C c3;
    class D c4;
    linkStyle 0 fill:none,stroke:#c7ddec,stroke-width:2;
    linkStyle 1 fill:none,stroke:#c7ddec,stroke-width:2;
    linkStyle 2 fill:none,stroke:#c7ddec,stroke-width:2;
    linkStyle 3 fill:none,stroke:#c7ddec,stroke-width:2;
</div>