mingrammer / diagrams

:art: Diagram as Code for prototyping cloud system architectures
https://diagrams.mingrammer.com
MIT License
36.86k stars 2.39k forks source link

Porting graphviz diagrams to diagrams #725

Open abhisina opened 2 years ago

abhisina commented 2 years ago

I have old graphviz diagrams that I am porting to diagrams for better maintenance of them but am not able to match the look and feel of it. Any help is greatly appreciated.

sample.gv


digraph G {
bgcolor=lightpink;
label="Sample diagram graphviz";
labelloc=t;
node [shape=polygon,sides=4,fillcolor=lightblue2,style="rounded,filled",fontname="Helvetica,Arial,sans-serif",color=lightblue];
a -> b -> c;
b -> d;
a -> e [dir=both];
a -> f;

a [label="basket1\n&\nbasket2",fillcolor=yellow];
b [label="gasket"];
c [label="athletics association"];
d [label="<f0> Sour Cream\n(Juice)|<f1> Fruit\n&\nPunch",shape=record,style=filled];
e [label="<f0> Sour Dough\n(Orange)|<f1> Flight risk",shape=record,style=filled];
f [label="Soya"];

}

Image exported with `dot`  
![sample](https://user-images.githubusercontent.com/31590656/177457821-157fb2e3-ec70-45da-8cfb-dd23612f3d79.png)

> sample.py
```python
#!/usr/bin/env python3

from diagrams import Diagram, Node, Edge

graph_attr = {
    "label": "Sample diagram diagrams",
    "labelloc": "t",
    "bgcolor": "lightpink",
}

node_attr = {
    "shape": "polygon",
    "sides": "4",
    "fillcolor": "lightblue2",
    "style": "rounded,filled",
    "fontname": "Helvetica,Arial,sans-serif",
    "color": "lightblue",
}

with Diagram("", show=False, direction="TB", graph_attr=graph_attr, node_attr=node_attr):
    a = Node(label="basket1\n&\nbasket2",fillcolor="yellow")
    b = Node(label="gasket")
    c = Node(label="athletics association")
    d = Node(label="<f0> Sour Cream\n(Juice)|<f1> Fruit\n&\nPunch",shape="record",style="filled")
    e = Node(label="<f0> Sour Dough\n(Orange)|<f1> Flight risk",shape="record",style="filled")
    f = Node(label="Soya")

    a >> b >> c;
    b >> d;
    a << Edge(minlen="0", penwidth="0.5", ltail="cluster_A", lhead="cluster_B") >> e
    a >> f;

The exported image:
diagrams_image

clayms commented 2 years ago

change your graph_attr to the following:

graph_attr = {
    "splines":"spline",
    "label": "Sample diagram diagrams",
    "labelloc": "t",
    "bgcolor": "lightpink",
}

For record shapes see: https://github.com/mingrammer/diagrams/issues/290#issuecomment-720159611