added support to mermaidjs

Signed-off-by: Antonio Mendoza Pérez <[email protected]>
serverlessworkflow · Sep 9, 2021 · cddd87a · cddd87a
1 parent bdaf08f
commit cddd87a
Show file tree

Hide file tree

Showing 9 changed files with 6,887 additions and 6,799 deletions.
diff --git a/README.md b/README.md
@@ -176,3 +176,20 @@ if (!injectionStateValidator(injectionState)) {
   injectionStateValidator.errors.forEach(error => console.error(error.message));
 }
 ```
+
+
+#### Generate workflow diagram
+
+It is possible to generate the workflow diagram with [Mermaid](https://github.com/mermaid-js/mermaid)
+
+
+```
+const workflow = workflowBuilder()
+    .id("helloworld")
+    ....
+    .build();
+
+const mermaidSourceCode = new MermaidDiagram(workflow).sourceCode();
+```
+
+[Here](./examples/browser/mermaid.html) you can see a full example that uses mermaid in the browser to generate the workflow diagram.
diff --git a/examples/browser/mermaid.html b/examples/browser/mermaid.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Serveless Workflow JS SDK</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+</head>
+<body>
+<!--
+  Run http-server from the project root then navigate to http://localhost:8080/examples/browser/index.html
+-->
+<div id="mermaid"  class="mermaid"></div>
+<script src="../../dist/umd/index.umd.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
+<script>mermaid.initialize({startOnLoad:true});</script>
+<script type="text/javascript">
+    (() => {
+        const { workflowBuilder, injectstateBuilder, MermaidDiagram } = serverWorkflowSdk;
+        const mermaidDiv = document.getElementById('mermaid');
+        const workflow = workflowBuilder()
+            .id("helloworld")
+            .version("1.0")
+            .specVersion("0.7")
+            .name("Hello World Workflow")
+            .description("Inject Hello World")
+            .start("Hello State")
+            .states([
+                injectstateBuilder()
+                    .name("Hello State")
+                    .data({
+                        "result": "Hello World!"
+                    })
+                    .end(true)
+                    .build()
+            ])
+            .build();
+
+        const mermaidSourceCode = new MermaidDiagram(workflow).sourceCode();
+        mermaidDiv.innerHTML = mermaidSourceCode;
+    })();
+</script>
+
+
+
+</body>
+</html>