5

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

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

它们的计算和显示方式如下所示，svg因此我们尝试svg导出 Chrome 扩展程序，例如：

他们都生成了黑色隐藏的不可用svg文件。

有人已经在尝试了吗？

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

带有其中一个蓝图的可视化工作流程插图

4

2 回答 2

1

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

截屏

于 2020-05-01T22:01:07.870 回答
0

编辑：

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

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

原始回复：

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

<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 代码（复制/粘贴 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
}

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

于 2019-09-16T19:58:01.213 回答