Flask 动态 graphviz 和 SVG 示例

Question

我正在尝试创建 Graphviz 图像，但是没有保存图像并加载到网页中，而是将其作为 SVG 传递。

它有点工作，这里是例子：

from flask import Flask
from graphviz import Graph


app = Flask(__name__)


@app.route('/svgtest')
def svgtest():
  chart_data = Graph()

  chart_data.node('H', 'Hello')
  chart_data.node('W', 'World')
  chart_data.edge('H', 'W')

  chart_output = chart_data.pipe(format='svg')

 return render_template('svgtest.html', chart_output=chart_output)

在我的HTML页面我有

<embed type="image/svg+xml" src={{ chart_output|safe }} />

但是输出不正确

任何帮助都会很棒，我开始自言自语，即使那样也没有帮助。

谢谢。

Answer 1

embed 标签的 src 属性应包含指向要嵌入的内容的 url，而不是内容本身：

The HTML <embed> element embeds external content at the specified point in the document. This content is provided by an external application ...

src The URL of the resource being embedded.

如果你想使用 embed，你应该在它自己的 url 下提供 svg（没有 html 模板）并在 [= embed 标签的 10=] 属性。

或者您可以直接在 html 模板中插入 svg，无需 embed 标签。

Answer 2

你可以像这样使用 svg:

{{ chart_output|safe }}

此外，您还可以使用 png 格式：

@app.route('/')
def svgtest():
    chart_data = Graph()

    chart_data.node('H', 'Hello')
    chart_data.node('W', 'World')
    chart_data.edge('H', 'W')


    chart_output = chart_data.pipe(format='png')
    chart_output = base64.b64encode(chart_output).decode('utf-8')

    return render_template('svgtest.html', chart_output=chart_output)

和 html 这样的：

<img src="data:image/png;base64,{{chart_output|safe}}" />

编码愉快！

Answer 3

这应该有效。我修改了一下。

from flask import Flask
from graphviz import Graph


app = Flask(__name__)


@app.route('/svgtest')
def svgtest():
  chart_data = Graph()

  chart_data.node('H', 'Hello')
  chart_data.node('W', 'World')
  chart_data.edge('H', 'W')

  chart_output = chart_data.pipe(format='svg').encode("utf-8")

 return render_template('svgtest.html', chart_output=chart_output)

修改后的html将是：

{{chart_output|safe}}

Flask 动态 graphviz 和 SVG 示例

Flask dynamic graphviz and SVG example

graphviz

flask