Using images or HTML with graphviz doesn't seem to work

Using Streamlit
#1

If I use the following piece of code:

import streamlit as st
import graphviz as gv

g = gv.Graph('hello')

g.node('hello', image='heart.png', shape='box')
g.node('world', label="world", shape='ellipse')

g.edge('hello', 'world')

st.graphviz_chart(g)

No matter where I place the heart.png, I cannot get the image to be displayed. I even used imagepath keyword, but the image would not be rendered.

A second problem is if I use a label with HTML in it such as the following, the graph will not even be drawn:

import streamlit as st
import graphviz as gv

g = gv.Graph('hello')

g.node('hello', label="<<h1>Hello</h1>>", shape='box')
g.node('world', label="world\r", shape='ellipse')

g.edge('hello', 'world')

st.graphviz_chart(g)

Any help with this?

Thanks and happy holidays,

Dinesh

#2

Hi @ddutt -

I don’t have much experience with graphviz, but have you tested your code in another environment to make sure it works properly? Meaning, if you develop your graph in Jupyter Notebook or something and it displays properly, but doesn’t display in st.graphviz_chart, then I can pass that on to our engineers.

Best,
Randy

#3

No I have not @randyzwitch. Let me try that and get back to you.

Dinesh

#4

So, when I try rendering the image as a png or pdf under Jupyter via: g.render(view=True, format=“png”), then the image does show up correctly. If I try svg, the image does not show up. Does this help?

Dinesh

1 Like
#5

Thanks for confirming @ddutt. I wonder if this is a similar issue to this one…this user is also reporting that SVG isn’t working correctly for a different use case:

Could you add your use to that thread, just to highlight they might be related?

#6

I’m not sure the issues are related, unless I do a bit more investigation. I’ll do so and reply here if I don’t think they’re related OR add to the bug as you suggest, if they are.
Hope that works. Thanks,
Dinesh