<?xml version="1.0"?>
<oembed><version>1.0</version><provider_name>Agilien Indonesia</provider_name><provider_url>https://agilien.visual-paradigm.com/id</provider_url><author_name>vpadmin</author_name><author_url>https://agilien.visual-paradigm.com/id/author/vpadmin/</author_url><title>Diagram Generation - Agilien Indonesia</title><type>rich</type><width>600</width><height>338</height><html>&lt;blockquote class="wp-embedded-content" data-secret="hYNVMiodOp"&gt;&lt;a href="https://agilien.visual-paradigm.com/id/docs/diagram-generation/"&gt;Diagram Generation&lt;/a&gt;&lt;/blockquote&gt;&lt;iframe sandbox="allow-scripts" security="restricted" src="https://agilien.visual-paradigm.com/id/docs/diagram-generation/embed/#?secret=hYNVMiodOp" width="600" height="338" title="&#x201C;Diagram Generation&#x201D; &#x2014; Agilien Indonesia" data-secret="hYNVMiodOp" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"&gt;&lt;/iframe&gt;&lt;script type="text/javascript"&gt;
/* &lt;![CDATA[ */
/*! This file is auto-generated */
!function(d,l){"use strict";l.querySelector&amp;&amp;d.addEventListener&amp;&amp;"undefined"!=typeof URL&amp;&amp;(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&amp;&amp;!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i&lt;o.length;i++)o[i].style.display="none";for(i=0;i&lt;a.length;i++)s=a[i],e.source===s.contentWindow&amp;&amp;(s.removeAttribute("style"),"height"===t.message?(1e3&lt;(r=parseInt(t.value,10))?r=1e3:~~r&lt;200&amp;&amp;(r=200),s.height=r):"link"===t.message&amp;&amp;(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&amp;&amp;n.host===r.host&amp;&amp;l.activeElement===s&amp;&amp;(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r&lt;s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document);
//# sourceURL=https://agilien.visual-paradigm.com/id/wp-includes/js/wp-embed.min.js
/* ]]&gt; */
&lt;/script&gt;
</html><description>Visualizing workflows and system architecture is a core part of Agile planning. The Diagram Workbench leverages AI to instantly create PlantUML diagrams from your work items. How it Works When you ask the AI to generate a diagram, it analyzes the&#xA0;title and description&#xA0;of the currently selected item (Epic, Story, or Sub-Task). It uses this context to generate PlantUML code that represents the process, structure, or flow described in the text. Supported Diagram Types You can choose from three common UML diagram types: Sequence Diagram: Excellent for showing interactions between different components or actors over time. Use this to visualize API calls, user login flows, or any process where the order of operations is important. Activity Diagram: Ideal for modeling business processes or workflows. Use this to illustrate the steps in a process, including decisions and branches. It&#x2019;s like a traditional flowchart. Class Diagram: Used to display the static structure of a system. It shows key classes, their attributes, methods, and the relationships between them (e.g., inheritance, association). This is useful for planning out your data model or service architecture. Generating Your First Diagram Select an Item: In the Project Hierarchy, click on a User Story or Sub-Task that describes a process. For example, a story like &#x201C;As a user, I want to log in with my email and password.&#x201D; Choose a Type: In the Diagram Workbench on the right, select &#x201C;Sequence Diagram&#x201D; from the dropdown. Generate: Click the&#xA0;Generate Diagram&#xA0;button. Review: After a few moments, the PlantUML code and a rendered SVG preview will appear. You will see participants like &#x201C;User,&#x201D; &#x201C;Browser,&#x201D; &#x201C;API Server,&#x201D; and &#x201C;Database,&#x201D; with messages showing the login sequence. Attaching a Diagram to an Item Once you are satisfied with the generated (or edited) diagram, you need to save it. Click the green&#xA0;Attach to [Item Type]&#xA0;button. The diagram is now saved and associated with that work item. A thumbnail will appear in the &#x201C;Diagram Attachments&#x201D; section of the Detail Panel for that item. You can now select other items and generate more diagrams. To view or edit a saved diagram, simply click its thumbnail in the Detail Panel. It will be loaded back into the Diagram Workbench.</description><thumbnail_url>https://agilien.visual-paradigm.com/id/wp-content/uploads/sites/8/2025/10/img_68f0c8a797f5a.png</thumbnail_url></oembed>
