将步骤功能可视化工作流导出为svg / png

Question

使用AWS步骤功能我们没有任何问题，我们甚至可以说我们的经验回报导致越来越多的步进机器。

尽管如此，我们还是想强调一些用于内部文档的状态机，并且希望找到比典型屏幕截图更好的导出步骤功能可视化工作流程的方法。特别是对于大型状态机。

它们按svg计算并显示为path.addArc，因此我们尝试path.addRect导出Chrome扩展程序，如：

• Export SVG with Style
• SVG Export

他们都生成了黑色隐藏的不可用init(roundedRect:...文件。

有人已经在尝试吗？

使用其中一个蓝图的可视化工作流程的插图：

Answer 1

Step Functions控制台现在支持将图形导出到PNG或SVG。在状态机查看器的顶部，单击导出> 导出到SVG 或导出到PNG 。

Screenshot

Answer 2

编辑：

在我的第一反应之后，我意识到它是显而易见的，并且没有真正提供解决方案，因此在学习了一些JavaScript几个小时之后，我想出了一个解决方案，将AWS使用的样式直接嵌入{{1} }文件。我仍然无法确定svg的大小，但是我希望这是在使用正式工具之前的正确方法。

https://codepen.io/tianmarin/full/RwbYpRO

---

原始回复：

保存svg文件的主要问题是它使用css类：

svg

如果在文档页面中导入svg代码（复制/粘贴svg文件内容），则可以将以下类添加到您的网站：

<svg class="sfn-workflow-graph" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
</svg>

在我们的例子中，我们使用docsify，它会自动添加svg图像，例如外部图像（ svg.sfn-workflow-graph { overflow: hidden; margin: auto; display: block; width: 100%; height: 100% } svg.sfn-workflow-graph .node>.shape { stroke: #555555; stroke-width: 0.6px; fill: #FFFFFF } svg.sfn-workflow-graph .node.state.NotYetStarted>.shape, workflow-graph svg.sfn-workflow-graph .node.state.Container>.shape { stroke-dasharray: 5 2 } svg.sfn-workflow-graph .node.state.Failed>.shape, workflow-graph svg.sfn-workflow-graph rect.legend.Failed { fill: #DE322F } svg.sfn-workflow-graph .node.state.CaughtError>.shape, workflow-graph svg.sfn-workflow-graph rect.legend.CaughtError { fill: #FFA500 } svg.sfn-workflow-graph .node.state.Succeeded>.shape, workflow-graph svg.sfn-workflow-graph rect.legend.Succeeded { fill: #2BD62E } svg.sfn-workflow-graph .node.state.InProgress>.shape, workflow-graph svg.sfn-workflow-graph rect.legend.InProgress { fill: #53c9ed } svg.sfn-workflow-graph .node.state.Cancelled>.shape, workflow-graph svg.sfn-workflow-graph rect.legend.Cancelled { fill: #dddddd } svg.sfn-workflow-graph .node.anchor>.shape { fill: #FFDA75 } svg.sfn-workflow-graph .node.state.hovered:not(.selected):not(.NotYetStarted)>.shape, workflow-graph svg.sfn-workflow-graph .node.selected>.shape { stroke: #555555; stroke-width: 2px } svg.sfn-workflow-graph .node.state.Container.Failed>.shape { fill: #EE9592 } svg.sfn-workflow-graph .node.state.Container.CaughtError>.shape { fill: #FFD27F } svg.sfn-workflow-graph .node.state.Container.Succeeded>.shape { fill: #91EA9A } svg.sfn-workflow-graph .node.state.Container.InProgress>.shape { fill: #A9E4F7 } svg.sfn-workflow-graph .node.state.Container.Cancelled>.shape { fill: #EEEEEE } svg.sfn-workflow-graph marker { fill: #555555 } svg.sfn-workflow-graph path { stroke: #555; background-color: #555; stroke-width: 1px } svg.sfn-workflow-graph .node.anchor, workflow-graph svg.sfn-workflow-graph .node.state.NotYetStarted { cursor: default } svg.sfn-workflow-graph .node.state { cursor: pointer } svg.sfn-workflow-graph tspan .label { font-weight: normal; font-size: 12px; text-shadow: none } ）。因此，添加CSS样式对我们没有帮助。