Export Step function visual workflows as svg/png

Question

We have no issue using AWS step functions and we can even say that our return of experience is leading to more and more step machines.

Still, we would like to emphasize some of our state machines for internal documentation and would love to find a better way to export step function visual workflows than the typical screenshot. In particular for large state machines.

They are computed as and displayed as svg so we tried svg export Chrome extensions like:

They both generated black hidden unusable svg files.

Is anyone already trying that?

Illustration of a visual workflow with one of the blueprints:

user_13191320 · Answer

The Step Functions console now supports exporting the graph to PNG or SVG. At the top of the state machine viewer, click Export > Export to SVG or Export to PNG.

Screenshot

user_5129222 · Answer

Edit:

After my first response, I realized it was quite obvious, and did not really provide a solution, so after a few hours learning some javascript i came up with a solution to embed the styles AWS uses directly in the svg file. I am still having some issues with svg sizing, but I hope this is the right path until an official tool is available.

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

Original response:

The main issue saving the svg file is that it uses css class:

If you import the svg code in your documentation page (copy/paste the svg file content) you can add the following class to your site:


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
}

In our case we use docsify, and it automatically add svg images like external images (). So adding the css styles does not help us.

Export Step function visual workflows as svg/png

2 Answers