Make Graphviz optional, use MermaidJS in admin frontend

.github/workflows/ci.yml

@@ -35,7 +35,7 @@ jobs:
       - uses: actions/setup-python@v6
         with:
           python-version: "3.x"
-      - run: sudo apt install -y python3-enchant graphviz
+      - run: sudo apt install -y python3-enchant
       - run: python -m pip install sphinxcontrib-spelling
       - run: python -m pip install -e '.[docs]'
       - run: python -m sphinx -W -b spelling docs docs/_build
@@ -83,7 +83,7 @@ jobs:
       - uses: actions/setup-python@v6
         with:
           python-version: ${{ matrix.python-version }}
-      - run: sudo apt install -y graphviz redis-server
+      - run: sudo apt install -y redis-server
       - run: python -m pip install "django==${{ matrix.django-version }}.*"
       - run: python -m pip install -e .[${{ matrix.extras }}]
       - run: python -m pytest

.readthedocs.yaml

@@ -8,8 +8,6 @@ build:
   os: ubuntu-20.04
   tools:
     python: "3.11"
-  apt_packages:
-    - graphviz
 
 sphinx:
   configuration: docs/conf.py

docs/commands.rst

@@ -9,20 +9,19 @@ render_workflow_graph
 
 Render workflow graph to file::
 
-    usage: manage.py render_workflow_graph [-h] [-f {svg,pdf,png}] [-d DIRECTORY]
-                                          [-c] [model [model ...]]
+    usage: manage.py render_workflow_graph [-h] [-f {mmd,mermaid}] [-d DIRECTORY]
+                                          [workflow [workflow ...]]
 
-    Render workflow graph to file.
+    Render workflow graph to file in Mermaid format.
 
     positional arguments:
       workflow              List of workflow to render in the form
                             app_label.workflow_name
 
     optional arguments:
       -h, --help            show this help message and exit
-      -f {svg,pdf,png}, --format {svg,pdf,png}
-                            Output file format. Default: svg
+      -f {mmd,mermaid}, --format {mmd,mermaid}
+                            Output file format. Default: mmd (Mermaid markdown)
       -d DIRECTORY, --directory DIRECTORY
                             Output directory. Default is current working
                             directory.
-      -c, --cleanup         Remove dot-files after rendering.

docs/conf.py

@@ -71,14 +71,11 @@ def linkcode_resolve(domain, info):
     ),
     "dramatiq": ("https://dramatiq.io/", None),
     "celery": ("https://docs.celeryproject.org/en/stable/", None),
-    "graphviz": ("https://graphviz.readthedocs.io/en/stable/", None),
 }
 
 spelling_word_list_filename = "spelling_wordlist.txt"
 spelling_show_suggestions = True
 
-graphviz_output_format = "svg"
-
 inheritance_graph_attrs = dict(
     rankdir="TB", size='"6.0, 8.0"', fontsize=14, ratio="compress"
 )

docs/index.rst

@@ -17,22 +17,25 @@ Django_ web framework.
 Here is a little sample of what a workflow or process written with joeflow
 may look like:
 
-.. graphviz::
-
-    digraph {
-        graph [rankdir=LR]
-        node [fillcolor=white fontname="sans-serif" shape=rect style=filled]
-        checkout [color=black fontcolor=black style="filled, rounded"]
-        "has email" [color=black fontcolor=black style=filled]
-        ship [color=black fontcolor=black style="filled, rounded"]
-        end [color=black fontcolor=black style=filled peripheries=2]
-        "send tracking code" [color=black fontcolor=black style=filled]
-        checkout -> ship
-        ship -> "has email"
-        "has email" -> "send tracking code"
-        "has email" -> end [color="#888888"]
-        "send tracking code" -> end
-    }
+.. code-block:: mermaid
+
+    graph LR
+        checkout(checkout)
+        has_email[has email]
+        ship(ship)
+        end[end]
+        send_tracking_code[send tracking code]
+        checkout --> ship
+        ship --> has_email
+        has_email --> send_tracking_code
+        has_email --> end
+        send_tracking_code --> end
+        style checkout fill:white,stroke:#000,stroke-width:2px,color:#000
+        style has_email fill:white,stroke:#000,stroke-width:2px,color:#000
+        style ship fill:white,stroke:#000,stroke-width:2px,color:#000
+        style end fill:white,stroke:#000,stroke-width:4px,color:#000
+        style send_tracking_code fill:white,stroke:#000,stroke-width:2px,color:#000
+        linkStyle 3 stroke:#888888
 
 .. code-block:: python
 

docs/tutorial/workflow.rst

@@ -8,20 +8,21 @@ user. A human selects the user (or leaves the field blank). If the user is set
 a welcome emails is being sent. If the user is blank no email will be send and
 the workflow will end right way.
 
-.. graphviz::
-
-    digraph {
-        graph [rankdir=LR]
-        node [fillcolor=white fontname="Georgia, serif" shape=rect style=filled]
-        start [color=black fontcolor=black style="filled, rounded"]
-        "send welcome email" [color=black fontcolor=black style=filled]
-        end [color=black fontcolor=black style=filled]
-        "has user" [color=black fontcolor=black style=filled]
-        start -> "has user"
-        "has user" -> end
-        "has user" -> "send welcome email"
-        "send welcome email" -> end
-    }
+.. code-block:: mermaid
+
+    graph LR
+        start(start)
+        send_welcome_email[send welcome email]
+        end[end]
+        has_user[has user]
+        start --> has_user
+        has_user --> end
+        has_user --> send_welcome_email
+        send_welcome_email --> end
+        style start fill:white,stroke:#000,stroke-width:2px,color:#000
+        style send_welcome_email fill:white,stroke:#000,stroke-width:2px,color:#000
+        style end fill:white,stroke:#000,stroke-width:2px,color:#000
+        style has_user fill:white,stroke:#000,stroke-width:2px,color:#000
 
 Let's start with the data structure or workflow state. We need a model that can
 store a user. Like so:

joeflow/management/commands/render_workflow_graph.py

@@ -18,9 +18,9 @@ def add_arguments(self, parser):
             "--format",
             dest="format",
             type=str,
-            choices=("svg", "pdf", "png"),
-            default="svg",
-            help="Output file format. Default: svg",
+            choices=("mmd", "mermaid"),
+            default="mmd",
+            help="Output file format. Default: mmd (Mermaid markdown)",
         )
         parser.add_argument(
             "-d",
@@ -29,19 +29,12 @@ def add_arguments(self, parser):
             type=str,
             help="Output directory. Default is current working directory.",
         )
-        parser.add_argument(
-            "-c",
-            "--cleanup",
-            dest="cleanup",
-            action="store_true",
-            help="Remove dot-files after rendering.",
-        )
+
 
     def handle(self, *args, **options):
         workflows = options["workflow"]
         verbosity = options["verbosity"]
         file_format = options["format"]
-        cleanup = options["cleanup"]
         directory = options.get("directory", None)
 
         workflows = [
@@ -59,8 +52,7 @@ def handle(self, *args, **options):
                     )
                 filename = f"{opt.app_label}_{workflow.__name__}".lower()
                 graph = workflow.get_graph()
-                graph.format = file_format
-                graph.render(filename=filename, directory=directory, cleanup=cleanup)
+                graph.render(filename=filename, directory=directory, format=file_format)
                 if verbosity > 0:
                     self.stdout.write("Done!", self.style.SUCCESS)
             else: