Skip to content

[Workflow] Add info about MermaidDumper #15102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 13, 2021
Merged

[Workflow] Add info about MermaidDumper #15102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added _images/components/workflow/blogpost_mermaid.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 19 additions & 1 deletion workflow/dumping-workflows.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,13 @@ them as SVG or PNG images. First, install any of these free and open source
applications needed to generate the images:

* `Graphviz`_, provides the ``dot`` command;
* `Mermaid CLI`_, provides the ``mmdc`` command;
* `PlantUML`_, provides the ``plantuml.jar`` file (which requires Java).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We also tell people about new features using a versionadded block:

Suggested change
.. versionadded:: 5.3
The ``mermaid`` dump format was introduced in Symfony 5.3.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While I fixed the other issues, I left out this one as the feature PR is not yet merged and although there's still plenty of time until 5.3 I erred on the cautious side.

.. versionadded:: 5.3

The ``mermaid`` dump format was introduced in Symfony 5.3.

If you are defining the workflow inside a Symfony application, run this command
to dump it as an image:

Expand All @@ -28,10 +33,17 @@ to dump it as an image:
# highlight 'place1' and 'place2' in the dumped workflow
$ php bin/console workflow:dump workflow-name place1 place2 | dot -Tsvg -o graph.svg

# using Mermaid.js CLI
$ php bin/console workflow:dump workflow_name --dump-format=mermaid | mmdc -o graph.svg

The DOT image will look like this:

.. image:: /_images/components/workflow/blogpost.png

The Mermaid image will look like this:

.. image:: /_images/components/workflow/blogpost_mermaid.png

The PlantUML image will look like this:

.. image:: /_images/components/workflow/blogpost_puml.png
Expand Down Expand Up @@ -63,7 +75,7 @@ You can use ``metadata`` with the following keys to style the workflow:

* ``bg_color``: a color;
* ``description``: a string that describes the state.

* for transitions:

* ``label``: a string that replaces the name of the transition;
Expand All @@ -76,6 +88,11 @@ Colors can be defined as:
* a color name from `PlantUML's color list`_;
* an hexadecimal color (both ``#AABBCC`` and ``#ABC`` formats are supported).

.. note::

The Mermaid dumper does not support coloring the arrow heads
with ``arrow_color`` as there is no support in Mermaid for doing so.

Below is the configuration for the pull request state machine with styling added.

.. configuration-block::
Expand Down Expand Up @@ -310,5 +327,6 @@ The PlantUML image will look like this:
.. image:: /_images/components/workflow/pull_request_puml_styled.png

.. _`Graphviz`: https://www.graphviz.org
.. _`Mermaid CLI`: https://github.com/mermaid-js/mermaid-cli
.. _`PlantUML`: https://plantuml.com/
.. _`PlantUML's color list`: https://plantuml.com/color