--- original_url: "https://jace.pro/blog/mermaidjs-lets-render-that-workflow-in-an-opinionated-way/" format: markdown ai_optimized: true --- MermaidJS: Lets render that workflow in an opinionated way# MermaidJS: Lets render that workflow in an opinionated way October 4, 2018 [servicenow ](/tags/servicenow/)[ui-pages](/tags/ui-pages/) Enable AI AnimationThe other day I was looking at my mermaidjs flows and wanted to see how they would render a servicenow workflow. I created a UI page to do this, you have to pass it a context `sys_id` today but this could be improved. ## [UI Action](#ui-action) `/* Name: Show Mermaid Table: Workflow Context[wf_context] Client: [True] OnClick: showWorkflowContextMermaid(); Script: */ function showWorkflowContextMermaid() { var id = g_form.getUniqueValue(); var url = new GlideURL('/mermaid.do'); url.addParam('sysparm_stack', 'no'); url.addParam('context', id); g_navigation.open(url.getURL(), "_blank"); }`## [UI Page](#ui-page) ``` ` var output = []; var wf_context = new GlideRecord('wf_context'); if(wf_context.get(RP.getParameterValue('context'))){ var wf_activity = new GlideRecord("wf_activity"); wf_activity.addQuery('workflow_version', wf_context.getValue('workflow_version')); wf_activity.orderBy('x'); // wf_activity.orderBy('y'); var query = wf_activity.getEncodedQuery(); wf_activity.query(); while(wf_activity.next()){ // gs.info(wf_activity.getValue('sys_id') + '(' + wf_activity.name.toString().replace(/\"/g,'') + ')'); output.push(wf_activity.getValue('sys_id') + '(' + wf_activity.name.toString().replace(/\"/g,'') + ')'); var transitions = new GlideRecord('wf_transition'); transitions.addQuery('from',wf_activity.getValue('sys_id')); transitions.query(); while(transitions.next()){ // output.push(wf_activity.getValue('sys_id') + '-->' + transitions.getValue('to')); output.push(wf_activity.getValue('sys_id') + '--' + transitions.condition.name.toString() + '-->' + transitions.getValue('to')); } } gs.info(output.toString().replace(/\,/g,'\n')); output = output.toString().replace(/\,/g,'\n') } else { var query = 'No Workflow Found'; } gs.info(query);

graph TD ${output}

` ``` --- [View this page on GitHub](https://github.com/jacebenson/jace.pro/tree/main/./src/posts/2018/2018-10-04-mermaidjs-lets-render-that-workflow-in-an-opinionated-way.md). [MermaidJS: Lets render that workflow in an opinionated way](https://jace.pro/blog/mermaidjs-lets-render-that-workflow-in-an-opinionated-way/) [Jace Benson](https://jace.pro) ![Jace Benson](https://jace.pro/icon-512x512.png) --- *This content is from Jace Benson's ServiceNow and tech blog at jace.pro* *Original post: https://jace.pro/blog/mermaidjs-lets-render-that-workflow-in-an-opinionated-way/*