How to write a text inside a "diagrams.programming.flowchart"

[quandv]

Hello! The first I want to say thank so much for your awesome tool 🎉

Do we able to write a text inside a diagrams.programming.flowchart? Please refer to attached image. Thanks!

[animesh-11]

I@quandv I have also the same question , if someone can help. Also I am trying to import and run in Jupyter Notebook but giving error. What is the correct format to import the flowchart ??

[SVENNNN97]

I have the same question! Does anyone know if this is already possible?

[adam820]

Hi! I'm just starting out with this package, but I also ran into this same question. Here's what I've discovered:

By setting the node_attr dict at the graph level with the labelloc attribute override to "c", you can center the text inside the flowchart items. However, because the flowchart items are images, they get a little weird with long titles, so 'fixedsize' set to false might look a little better. The lines also extend from what looks like the bounding box of the image, which may not be ideal. For example:

from diagrams import Diagram, Cluster
from diagrams.programming.flowchart import Action, Decision

graph_attrs={
    "splines": "curved"
}
node_attrs={
    "labelloc": "c",
    "fixedsize": "false"
}

with Diagram("Test Diagram",show=False, node_attr=node_attrs, graph_attr=graph_attrs) as diag:
    a1 = Action("Do a thing")
    a2 = Action("Do another thing")
    with Cluster("Cluster Subgraph") as sg:
        d1 = Decision("Decide what we want to do")
        y = Decision("Yes")
        n = Decision("No")

        d1 >> y
        d1 >> n
        n >> a2
        y >> a1
        a2 >> d1

That generates an image like the following:

Note, however, that these node options are applied at the graph level and are applied to every node that is added in the whole diagram (unless you override; see below). For a flowchart, you may be better off creating a subclass or default set of options, and applying those per-Node. For example, showing both a subclass ("DecisionDiamond") and a set of passed-in attrs for the default Nodes:

from diagrams import Diagram, Node, Cluster

graph_attrs={
    "splines": "lines"
}

class DecisionDiamond(Node):
    def __init__(self, label: str = "", **attrs):
        defaults={
            "shape": "diamond",
            "fixedsize": "true",
            "width": "2",
            "height": "1.5",
            "style": "filled",
            "fillcolor": "#FFFBF",
            "labelloc": "c"
        }
        attrs = {**defaults, **attrs}
        super().__init__(label=label, **attrs)

boxattrs={
    "style": "filled",
    "shape": "box",
    "fixedsize": "true",
    "width": "1.7",
    "height": "1.2",
    "fillcolor": "#AB3DC0"
}


with Diagram("Test Diagram",show=False, graph_attr=graph_attrs) as diag:
    a1 = Node("Do a thing", **boxattrs)
    a2 = Node("Do another thing", **boxattrs)
    with Cluster("Cluster Subgraph") as sg:
        d1 = DecisionDiamond("Decide what we\nwant to do")
        y = DecisionDiamond("Yes", fillcolor="green")
        n = DecisionDiamond("No", fillcolor="red")

        d1 >> y
        d1 >> n
        n >> a2
        y >> a1
        a2 >> d1

This generates the following graph:

Ultimately, the existing dot shapes might work out better for a regular flowchart. YMMV. This may be a helpful thing to add to the documentation if it's the intended behavior; it's not immediately obvious this is how you could go about this. Hope this helps!