Issue with the Diagrams example

[brandonbiggs]

Hi,

I'm trying to run the diagrams example in the gallery (https://pawamoy.github.io/markdown-exec/gallery/#with-diagrams).

I'm getting the following error:

Traceback (most recent call last):
  File ".../python3.10/site-packages/markdown_exec/formatters/python.py", line 71, in _run_python
    exec_python(code, code_block_id, exec_globals)
  File ".../python3.10/site-packages/markdown_exec/formatters/_exec_python.py", line 8, in exec_python
    exec(compiled, exec_globals)  # noqa: S102
  File "<code block: n1>", line 27, in <module>
    print(f'<div><img src="data:image/png;base64, {png}"/></div>')
NameError: name 'png' is not defined

I copied the python snippet exactly as is.

My markdown file:

--8<-- "diagrams/example.py"

The plotly example works, so I don't think it's my configuration?

[pawamoy]

Hi,

It's working for me locally. Can you try running the code in a Python interpreter and see if you get a FileNotFoundError too early maybe? It would explain why png is not assigned.

Also, what version of diagrams do you have? I have 0.23.4.

[pawamoy]

Ah, maybe you're missing the dot executable. It's usually installed with graphviz.

[brandonbiggs]

Same issue with normal Python interpreter.

├── diagrams v0.23.4
│   ├── graphviz v0.20.3
│   ├── jinja2 v3.1.4
│   │   └── markupsafe v3.0.0
│   └── typed-ast v1.5.5

I'll look for the dot executable.

[brandonbiggs]

I am on Mac. I'm working on installing graphviz now.

[brandonbiggs]

I guess I already had graphviz installed

$ python3 docs/includes/diagrams/example.py
Traceback (most recent call last):
  File "example.py", line 27, in <module>
    print(f'<div><img src="data:image/png;base64, {png}"/></div>')
NameError: name 'png' is not defined

├── diagrams v0.23.4
│   ├── graphviz v0.20.3
│   ├── jinja2 v3.1.4
│   │   └── markupsafe v3.0.0
│   └── typed-ast v1.5.5
├── graphviz v0.20.3
├── markdown-exec v1.9.3
│   └── pymdown-extensions v10.11.2
│       ├── markdown v3.7
│       └── pyyaml v6.0.2

[pawamoy]

Well, do you have the dot exec? Try removing the FileNotFoundError suppress statement.

[pawamoy]

Also remove the line diagram.render = lambda: None.

[brandonbiggs]

I do have the dot executable.

$ dot -V
dot - graphviz version 12.1.2 (20240928.0832)

This is without the suppress statement

$ python3 example.py
Traceback (most recent call last):
  File "example.py", line 19, in <module>
    with Diagram("Exposed Pod with 3 Replicas", show=False) as diagram:
  File ".../python3.10/site-packages/diagrams/__init__.py", line 166, in __exit__
    os.remove(self.filename)
FileNotFoundError: [Errno 2] No such file or directory: 'exposed_pod_with_3_replicas'

[brandonbiggs]

Okay, removing the line diagram.render = lambda: None and I did not get the error and got the base64 decoded image.

Current status of the file:

from base64 import b64encode
from contextlib import suppress

from diagrams import Diagram
from diagrams.k8s.clusterconfig import HPA
from diagrams.k8s.compute import Deployment, Pod, ReplicaSet
from diagrams.k8s.network import Ingress, Service

with Diagram("Exposed Pod with 3 Replicas", show=False) as diagram:
    # diagram.render = lambda: None
    net = Ingress("domain.com") >> Service("svc")
    net >> [Pod("pod1"), Pod("pod2"), Pod("pod3")] << ReplicaSet("rs") << Deployment("dp") << HPA("hpa")
    png = b64encode(diagram.dot.pipe(format="png")).decode()

# Wrapping the image in a div prevents it from being wrapped in a paragraph,
# which would add unnecessary space around it.
print(f'<div><img src="data:image/png;base64, {png}"/></div>')

[brandonbiggs]

Thanks for the help!

[pawamoy]

Huh, OK, weird. The FileNotFoundError is only raised when exiting the Diagram context manager, so the png assignment should run fine.

While your updated code works, note that it might be generating PNGs in the current directory, which is annoying, and the whole reason for the two lines you removed 😄

Ideally you'd run the code (with the error suppression and diagram.render patch lines) in a debugger to see what happens and why png isn't assigned.