Merge pull request #15 from tsurdilo/diagramskin

Updating generated diagram look/feel and adding legend

Author: Tihomir Surdilovic

README.md

@@ -270,11 +270,11 @@ List<ValidationError> validationErrors = workflowValidator.setWorkflow(workflow)
 
 #### Building Workflow Diagram
 
-Given a valid workflow source or a Workflow object you can build the workflow Diagram SVG.
-Diagrams are built using [PlantUML](https://plantuml.com/) and can be embedded inside your 
+Given a valid workflow definition (JSON/YAML) or a Workflow object you can build the workflow diagram SVG.
+The generated diagram SVG uses [PlantUML](https://plantuml.com/) state diagram visualization and can be embedded inside your 
 tooling or web pages, or any SVG viewer.
 
-You can build the workflow diagram SVG the the following code:
+You can build the workflow diagram SVG with the following code:
 
 ``` java
 Workflow workflow = Workflow.fromSource(source);
@@ -285,7 +285,7 @@ workflowDiagram.setWorkflow(workflow);
 String diagramSVG = workflowDiagram.getSvgDiagram();
 ```
 
-`diagramSVG` includes the diagram SVG which you can then decide to save to a file, 
+`diagramSVG` includes the diagram SVG source which you can then decide to save to a file, 
 print, or process further.
 
 Here are some generated diagrams from the specification examples:

diagram/src/main/java/io/serverlessworkflow/diagram/model/ModelStateDef.java

@@ -0,0 +1,40 @@
+/*
+ * Copyright 2020-Present The Serverless Workflow Specification Authors
+ * <p>
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * <p>
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * <p>
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+package io.serverlessworkflow.diagram.model;
+
+import io.serverlessworkflow.diagram.utils.WorkflowDiagramUtils;
+
+public class ModelStateDef {
+    private String name;
+    private String type;
+
+    public ModelStateDef(String name, String type) {
+        this.name = name;
+        this.type = type;
+    }
+
+    @Override
+    public String toString() {
+        StringBuffer retBuff = new StringBuffer();
+        retBuff.append(WorkflowDiagramUtils.stateDef)
+                .append(name)
+                .append(WorkflowDiagramUtils.typeDefStart)
+                .append(type)
+                .append(WorkflowDiagramUtils.typeDefEnd);
+        return retBuff.toString();
+    }
+}

diagram/src/main/java/io/serverlessworkflow/diagram/model/WorkflowDiagramModel.java

@@ -18,7 +18,6 @@
 
 import io.serverlessworkflow.api.Workflow;
 import io.serverlessworkflow.api.interfaces.State;
-import io.serverlessworkflow.api.interfaces.WorkflowDiagram;
 import io.serverlessworkflow.api.states.*;
 import io.serverlessworkflow.api.switchconditions.DataCondition;
 import io.serverlessworkflow.api.switchconditions.EventCondition;
@@ -34,6 +33,7 @@ public class WorkflowDiagramModel {
     private String title;
     private String legend;
     private String footer;
+    private List<ModelStateDef> modelStateDefs = new ArrayList<>();
     private List<ModelState> modelStates = new ArrayList<>();
     private List<ModelConnection> modelConnections = new ArrayList<>();
 
@@ -44,10 +44,9 @@ public WorkflowDiagramModel(Workflow workflow) {
 
     private void inspect(Workflow workflow) {
         // title
-        setTitle(WorkflowDiagramUtils.title + workflow.getName());
+        setTitle(workflow.getName());
         if (workflow.getVersion() != null && workflow.getVersion().trim().length() > 0) {
             StringBuffer titleBuf = new StringBuffer()
-                    .append(WorkflowDiagramUtils.title)
                     .append(workflow.getName())
                     .append(WorkflowDiagramUtils.versionSeparator)
                     .append(workflow.getVersion());
@@ -68,15 +67,24 @@ private void inspect(Workflow workflow) {
         // footer
         setFooter(WorkflowDiagramUtils.footer);
 
-        // states
-        inspectStates(workflow);
+        // state definitions
+        inspectStateDefinitions(workflow);
 
-        // connections
-        inspectConnections(workflow);
+        // states info
+        inspectStatesInfo(workflow);
 
+        // states connections
+        inspectStatesConnections(workflow);
+
+    }
+
+    private void inspectStateDefinitions(Workflow workflow) {
+        for(State state : workflow.getStates()) {
+            modelStateDefs.add(new ModelStateDef(state.getName(), state.getType().value()));
+        }
     }
 
-    private void inspectConnections(Workflow workflow) {
+    private void inspectStatesConnections(Workflow workflow) {
         State workflowStartState = WorkflowDiagramUtils.getWorkflowStartState(workflow);
         modelConnections.add(new ModelConnection(WorkflowDiagramUtils.wfStart, workflowStartState.getName(), ""));
 
@@ -242,7 +250,7 @@ private void inspectConnections(Workflow workflow) {
         }
     }
 
-    private void inspectStates(Workflow workflow) {
+    private void inspectStatesInfo(Workflow workflow) {
         List<State> workflowStates = workflow.getStates();
         for(State state : workflowStates) {
             ModelState modelState = new ModelState(state.getName());
@@ -393,4 +401,12 @@ public List<ModelConnection> getModelConnections() {
     public void setModelConnections(List<ModelConnection> modelConnections) {
         this.modelConnections = modelConnections;
     }
+
+    public List<ModelStateDef> getModelStateDefs() {
+        return modelStateDefs;
+    }
+
+    public void setModelStateDefs(List<ModelStateDef> modelStateDefs) {
+        this.modelStateDefs = modelStateDefs;
+    }
 }

diagram/src/main/java/io/serverlessworkflow/diagram/utils/WorkflowDiagramUtils.java

@@ -34,6 +34,10 @@ public class WorkflowDiagramUtils {
     public static final String footer = "center footer Serverless Workflow Specification - serverlessworkflow.io";
     public static final String legendStart = new StringBuffer().append("legend top center").append(System.lineSeparator()).toString();
     public static final String legendEnd = new StringBuffer().append(System.lineSeparator()).append("endlegend").toString();
+    public static final String stateDef = "state ";
+    public static final String typeDefStart = " << ";
+    public static final String typeDefEnd = " >> ";
+
 
     public static State getWorkflowStartState(Workflow workflow) {
         return workflow.getStates().stream()

diagram/src/main/resources/templates/plantuml/workflow-template.txt

@@ -1,12 +1,30 @@
 @startuml
-[(${diagram.title})]
-[(${diagram.legend})]
-[(${diagram.footer})]
 skinparam backgroundColor White
+skinparam legendBackgroundColor White
+skinparam legendBorderColor White
 skinparam state {
   StartColor Green
-  EndColor Red
+  EndColor Orange
+  BackgroundColor GhostWhite
+  BackgroundColor<< workflow >> White
+  BorderColor Black
+  ArrowColor Black
+
+  BorderColor<< event >> #7fe5f0
+  BorderColor<< operation >> #bada55
+  BorderColor<< switch >> #92a0f2
+  BorderColor<< delay >> #b83b5e
+  BorderColor<< parallel >> #6a2c70
+  BorderColor<< subflow >> #87753c
+  BorderColor<< inject >> #1e5f74
+  BorderColor<< foreach >> #931a25
+  BorderColor<< callback >> #ffcb8e
 }
+state "[(${diagram.title})]" as workflow << workflow >> {
+
+[# th:each="stateDef : ${diagram.modelStateDefs}" ]
+[(${stateDef.toString()})]
+[/]
 
 [# th:each="state : ${diagram.modelStates}" ]
 [(${state.toString()})]
@@ -16,4 +34,12 @@ skinparam state {
 [(${connection.toString()})]
 [/]
 
+}
+
+legend center
+State Types and Border Colors:
+| Event | Operation | Switch | Delay | Parallel | SubFlow | Inject | ForEach | CallBack |
+|<#7fe5f0>|<#bada55>|<#92a0f2>|<#b83b5e>|<#6a2c70>|<#87753c>|<#1e5f74>|<#931a25>|<#ffcb8e>|
+endlegend
+
 @enduml