wf graph with mermaid

dnet-app/frontends/is/src/app/wf-confs/wf-common.component.ts

@@ -29,13 +29,39 @@ export class WfTemplateDialog implements AfterViewInit {
 	public ngAfterViewInit(): void {
 
 		const element: any = this.mermaidGraph.nativeElement;
-		element.innerHTML = 'graph LR\nA --- B\nB-->C[fa:fa-ban forbidden]\nB-->D(fa:fa-spinner);\n';
 
-		alert(element.innerHTML);
+		/*		flowchart TD
+				A[Start] --> B{Is it?}
+				B -- Yes --> C[OK]
+				C --> D[Rethink]
+				D --> B
+				B -- No ----> E[End]
+		*/
 
-		mermaid.initialize({
-			theme: "default"
+
+		let code = 'flowchart TD\n';
+
+		this.template.graph.forEach((node: any) => {
+			let from: string = node.name;
+			let type: string = node.type;
+			let start: boolean = node.start;
+			let join: boolean = node.join;
+			node.arcs.forEach((arc: any) => {
+				let to: string = arc.to;
+				let condition: string = arc.condition;
+				if (condition) {
+					code += "\t" + from + " -- " + condition + " --> " + to + "\n";
+				} else {
+					code += "\t" + from + " --> " + to + "\n";
+				}
+			});
 		});
+
+		alert(code);
+
+		element.innerHTML = code;
+
+		mermaid.initialize({ theme: "default" });
 		mermaid.run();
 	}