Экспорт визуальных рабочих процессов функции Step в формате svg / png

У нас нет проблем с использованием пошаговых функций AWS, и мы даже можем сказать, что возвращение нашего опыта приводит к появлению все большего количества шаговых машин.

Тем не менее, мы хотели бы выделить некоторые из наших конечных автоматов для внутренней документации и найти лучший способ экспорта визуальных рабочих процессов пошаговых функций, чем типичный снимок экрана. В особенности для больших государственных автоматов.

Они вычисляются и отображаются как svg, поэтому мы попробовали svg экспортировать расширения Chrome, например:

Оба они создали черные скрытые непригодные svg файлы.

Кто-нибудь уже пробует это?

Иллюстрация визуального рабочего процесса с одним из чертежей:

Иллюстрация визуального рабочего процесса с одним из чертежей


aws-step-functions
person herve    schedule 08.11.2017    source источник
comment
Привет @herve, не могли бы вы отправить мне электронное письмо на [email protected], чтобы я мог направить ваш запрос обратной связи в нужное место?   -  person Trevor Sullivan    schedule 14.11.2017

Ответы (2)


arrow_upward
1
arrow_downward

Консоль Step Functions теперь поддерживает экспорт графика в PNG или SVG. В верхней части окна просмотра состояний нажмите Экспорт> Экспорт в SVG или Экспорт в PNG.

Снимок экрана

person adamwong    schedule 01.05.2020

arrow_upward
0
arrow_downward

Изменить:

После моего первого ответа я понял, что это совершенно очевидно и на самом деле не предлагал решения, поэтому после нескольких часов изучения некоторого 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 нам не помогает.

person Cristian Marin    schedule 16.09.2019