将 Step 函数可视化工作流导出为 svg/png

Question

我们使用 AWS 步进函数没有问题，我们甚至可以说我们的 return 经验正在导致越来越多的步进机。

不过，我们还是想强调一些用于内部文档的状态机，并希望找到一种比典型屏幕截图更好的方法来导出步进函数可视化工作流。特别是对于大型状态机。

它们被计算为 svg 并显示为 svg 所以我们尝试 svg 导出 Chrome 扩展如：

它们都生成了黑色隐藏的无法使用的 svg 文件。

有人尝试过吗？

带有其中一张蓝图的可视化工作流图示：

Answer 1

编辑：

第一次回复后，我意识到这很明显，并没有真正提供解决方案，所以在学习了几个小时后 javascript 我想出了一个解决方案来嵌入 AWS 直接使用的样式在 svg 文件中。我在 svg 调整大小方面仍然存在一些问题，但我希望在官方工具可用之前这是正确的方法。

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

原回复：

保存 svg 文件的主要问题是它使用 css class:

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

如果您在文档页面中导入 svg 代码（copy/paste svg 文件内容），您可以将以下 class 添加到您的站点：


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
}

在我们的例子中，我们使用 docsify，它会自动添加 svg 图像，如外部图像 (<img src="file.svg"/>)。所以添加 css 样式对我们没有帮助。

Answer 2

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

Screenshot

将 Step 函数可视化工作流导出为 svg/png

Export Step function visual workflows as svg/png

aws-step-functions