diff --git a/ui/src/app/shared/components/graph/graph-panel.tsx b/ui/src/app/shared/components/graph/graph-panel.tsx
index 32e6c56ef148..d22781244d84 100644
--- a/ui/src/app/shared/components/graph/graph-panel.tsx
+++ b/ui/src/app/shared/components/graph/graph-panel.tsx
@@ -247,7 +247,9 @@ export function GraphPanel(props: Props) {
                                 .filter(([n, label]) => label.x !== null && visible(n))
                                 .map(([n, label]) => (
                                     <g key={`node/${n}`} transform={`translate(${label.x},${label.y})`}>
-                                        <title>{n}</title>
+                                        <title>
+                                            {n} ({label.label})
+                                        </title>
                                         <g
                                             className={`node ${label.classNames || ''} ${props.selectedNode === n ? ' selected' : ''}`}
                                             style={{strokeWidth: nodeSize / 15}}
diff --git a/ui/src/app/workflows/components/workflow-dag/workflow-dag-render-options-panel.tsx b/ui/src/app/workflows/components/workflow-dag/workflow-dag-render-options-panel.tsx
index 6607a3b058b1..3be88a123450 100644
--- a/ui/src/app/workflows/components/workflow-dag/workflow-dag-render-options-panel.tsx
+++ b/ui/src/app/workflows/components/workflow-dag/workflow-dag-render-options-panel.tsx
@@ -39,6 +39,28 @@ export function WorkflowDagRenderOptionsPanel(props: WorkflowDagRenderOptions &
                 title='Expand all nodes'>
                 <i className='fa fa-expand fa-fw' data-fa-transform='rotate-45' />
             </a>
+            <a
+                onClick={() =>
+                    props.onChange({
+                        ...workflowDagRenderOptions(),
+                        showInvokingTemplateName: !workflowDagRenderOptions().showInvokingTemplateName
+                    })
+                }
+                className={workflowDagRenderOptions().showInvokingTemplateName ? 'active' : ''}
+                title='Show invoking template name'>
+                <i className='fa fa-tag fa-fw' data-fa-transform='rotate-45' />
+            </a>
+            <a
+                onClick={() =>
+                    props.onChange({
+                        ...workflowDagRenderOptions(),
+                        showTemplateRefsGrouping: !workflowDagRenderOptions().showTemplateRefsGrouping
+                    })
+                }
+                className={workflowDagRenderOptions().showTemplateRefsGrouping ? 'active' : ''}
+                title='Group by templateRefs'>
+                <i className='fa fa-sitemap fa-fw' />
+            </a>
         </>
     );
 }
diff --git a/ui/src/app/workflows/components/workflow-dag/workflow-dag.tsx b/ui/src/app/workflows/components/workflow-dag/workflow-dag.tsx
index 8160ca34c79d..b5a9b1c18c54 100644
--- a/ui/src/app/workflows/components/workflow-dag/workflow-dag.tsx
+++ b/ui/src/app/workflows/components/workflow-dag/workflow-dag.tsx
@@ -13,6 +13,8 @@ import {WorkflowDagRenderOptionsPanel} from './workflow-dag-render-options-panel
 export interface WorkflowDagRenderOptions {
     expandNodes: Set<string>;
     showArtifacts: boolean;
+    showInvokingTemplateName: boolean;
+    showTemplateRefsGrouping: boolean;
 }
 
 interface WorkflowDagProps {
@@ -36,18 +38,6 @@ function getNodeLabelTemplateName(n: NodeStatus): string {
     return n.templateName || (n.templateRef && n.templateRef.template + '/' + n.templateRef.name) || 'no template';
 }
 
-function nodeLabel(n: NodeStatus) {
-    const phase = n.type === 'Suspend' && n.phase === 'Running' ? 'Suspended' : n.phase;
-    return {
-        label: shortNodeName(n),
-        genre: n.type,
-        icon: icons[phase] || icons.Pending,
-        progress: phase === 'Running' && progress(n),
-        classNames: phase,
-        tags: new Set([getNodeLabelTemplateName(n)])
-    };
-}
-
 const classNames = (() => {
     const v: {[label: string]: boolean} = {
         Artifact: true,
@@ -65,7 +55,9 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
         super(props);
         this.state = {
             expandNodes: new Set(),
-            showArtifacts: localStorage.getItem('showArtifacts') !== 'false'
+            showArtifacts: localStorage.getItem('showArtifacts') !== 'false',
+            showInvokingTemplateName: localStorage.getItem('showInvokingTemplateName') !== 'false',
+            showTemplateRefsGrouping: localStorage.getItem('showTemplateRefsGrouping') !== 'false'
         };
     }
 
@@ -100,8 +92,28 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
         );
     }
 
+    private nodeLabel(n: NodeStatus, parent?: NodeStatus) {
+        const phase = n.type === 'Suspend' && n.phase === 'Running' ? 'Suspended' : n.phase;
+        let label = shortNodeName(n);
+
+        if (this.state.showInvokingTemplateName) {
+            label = `${parent?.templateRef?.name ?? parent?.templateName ?? n.templateName}:${label}`;
+        }
+
+        return {
+            label,
+            genre: n.type,
+            icon: icons[phase] || icons.Pending,
+            progress: phase === 'Running' && progress(n),
+            classNames: phase,
+            tags: new Set([getNodeLabelTemplateName(n)])
+        };
+    }
+
     private saveOptions(newChanges: WorkflowDagRenderOptions) {
         localStorage.setItem('showArtifacts', newChanges.showArtifacts ? 'true' : 'false');
+        localStorage.setItem('showInvokingTemplateName', newChanges.showInvokingTemplateName ? 'true' : 'false');
+        localStorage.setItem('showTemplateRefsGrouping', newChanges.showTemplateRefsGrouping ? 'true' : 'false');
         this.setState(newChanges);
     }
 
@@ -133,6 +145,13 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
             if (!allNodes[nodeId] || !allNodes[nodeId].children) {
                 return [];
             }
+
+            if (this.state.showTemplateRefsGrouping) {
+                return Object.values(allNodes)
+                    .filter(node => node.boundaryID === nodeId && genres[node.type])
+                    .map(node => node.id);
+            }
+
             return allNodes[nodeId].children.filter(child => allNodes[child]);
         };
         const pushChildren = (nodeId: string, isExpanded: boolean, queue: PrepareNode[]): void => {
@@ -163,14 +182,22 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
                     children: getChildren(children[children.length - 1])
                 });
             } else {
-                // Node will not be collapsed
-                children.map(child =>
-                    queue.push({
-                        nodeName: child,
-                        parent: nodeId,
+                // Node will not be collapsed if no templateRefs are present
+                children.map(child => {
+                    let parentNodeId = nodeId;
+                    let nodeName = child;
+
+                    if (allNodes[nodeId].templateRef && this.state.showTemplateRefsGrouping) {
+                        parentNodeId = allNodes[child].boundaryID;
+                        nodeName = !isExpanded ? getCollapsedNodeName(nodeId, `template:${allNodes[nodeId].templateRef.name}`, allNodes[child].type) : child;
+                    }
+
+                    return queue.push({
+                        nodeName,
+                        parent: parentNodeId,
                         children: getChildren(child)
-                    })
-                );
+                    });
+                });
             }
         };
 
@@ -201,7 +228,7 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
                 }
                 const isExpanded: boolean = this.state.expandNodes.has('*') || this.state.expandNodes.has(item.nodeName);
 
-                nodes.set(item.nodeName, nodeLabel(child));
+                nodes.set(item.nodeName, this.nodeLabel(child, allNodes[item.parent]));
                 edges.set({v: item.parent, w: item.nodeName}, {});
 
                 // If we have already considered the children of this node, don't consider them again
@@ -232,7 +259,7 @@ export class WorkflowDag extends React.Component<WorkflowDagProps, WorkflowDagRe
         if (onExitHandlerNodeId) {
             this.getOutboundNodes(this.props.workflowName).forEach(v => {
                 const exitHandler = allNodes[onExitHandlerNodeId.id];
-                nodes.set(onExitHandlerNodeId.id, nodeLabel(exitHandler));
+                nodes.set(onExitHandlerNodeId.id, this.nodeLabel(exitHandler));
                 if (nodes.has(v)) {
                     edges.set({v, w: onExitHandlerNodeId.id}, {});
                 }