{"id":926,"date":"2025-10-15T14:05:32","date_gmt":"2025-10-15T06:05:32","guid":{"rendered":"https:\/\/agilien.visual-paradigm.com\/pt\/?post_type=docs&p=926"},"modified":"2025-10-16T18:14:05","modified_gmt":"2025-10-16T10:14:05","password":"","slug":"the-interface-a-guided-tour","status":"publish","type":"docs","link":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/","title":{"rendered":"The Interface: A Guided Tour"},"content":{"rendered":"

The Agilien interface is divided into three main columns, each serving a specific purpose in your workflow.<\/p>\n

\n
\n
\n
\n
\n

\"Agilien<\/h3>\n

1. The Left Panel: Project & Hierarchy<\/h3>\n

This panel is your starting point and primary navigation hub.<\/p>\n

\n
    \n
  • Project Definition<\/strong>: The form at the top where you describe your project to the AI. This includes the domain, context, start date, and duration. You can also access the\u00a0Example Gallery<\/strong>\u00a0from here.<\/li>\n
  • Project Hierarchy<\/strong>: Once a project is generated, this tree view displays the entire structure of Epics, User Stories, and Sub-Tasks. Clicking an item in this tree selects it and populates the other panels with its data.<\/li>\n<\/ul>\n<\/div>\n

    2. The Middle Panel: Item Details<\/h3>\n

    This is where you view and edit the details of the currently selected item from the hierarchy.<\/p>\n

    \n
      \n
    • Header<\/strong>: Shows the item’s type (Epic, Story, Sub-Task), its title, and its Jira Key (if synced). The\u00a0Edit<\/strong>\u00a0button is also located here.<\/li>\n
    • Description<\/strong>: The main body of the work item. For User Stories, this describes the user’s perspective and goal.<\/li>\n
    • Acceptance Criteria<\/strong>: For User Stories, this section outlines the “Given-When-Then” conditions that must be met for the story to be considered complete.<\/li>\n
    • Metadata<\/strong>: A quick overview of the item’s priority, estimate, and scheduled start and end dates.<\/li>\n
    • Diagram Attachments<\/strong>: If you’ve created and saved any diagrams for this item, they will appear as thumbnails here. Clicking a thumbnail loads it into the Diagram Workbench for viewing or further editing.<\/li>\n<\/ul>\n<\/div>\n

      3. The Right Panel: Diagram Workbench<\/h3>\n

      This powerful tool allows you to visualize any work item as a formal diagram.<\/p>\n

      \n
        \n
      • Diagram Type Selector<\/strong>: Choose the type of diagram you want to generate (Sequence, Activity, or Class).<\/li>\n
      • Generate Diagram Button<\/strong>: After selecting an item and a diagram type, click this button to have the AI generate the diagram code and a visual preview.<\/li>\n
      • Attach\/Update Button<\/strong>: Once a diagram is generated, this button allows you to save it as an attachment to the selected work item. If you’ve loaded an existing diagram, this button will say “Update Diagram.”<\/li>\n
      • PlantUML Code Editor<\/strong>: A collapsible section that reveals the raw PlantUML source code for the generated diagram. You can directly edit this code, and the visual preview will update in real-time. This is perfect for fine-tuning the AI’s output.<\/li>\n
      • Preview Area<\/strong>: Displays the rendered SVG of the diagram.<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<\/section>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

        The Agilien interface is divided into three main columns, each serving a specific purpose in your workflow. 1. The Left Panel: Project & Hierarchy This panel is your starting point and primary navigation hub. Project Definition: The form at the top where you describe your project to the AI. This includes the domain, context, start date, and duration. You can also access the\u00a0Example Gallery\u00a0from here. Project Hierarchy: Once a project is generated, this tree view displays the entire structure of Epics, User Stories, and Sub-Tasks. Clicking an item in this tree selects it and populates the other panels with its data. 2. The Middle Panel: Item Details This is where you view and edit the details of the currently selected item from the hierarchy. Header: Shows the item’s type (Epic, Story, Sub-Task), its title, and its Jira Key (if synced). The\u00a0Edit\u00a0button is also located here. Description: The main body of the work item. For User Stories, this describes the user’s perspective and goal. Acceptance Criteria: For User Stories, this section outlines the “Given-When-Then” conditions that must be met for the story to be considered complete. Metadata: A quick overview of the item’s priority, estimate, and scheduled start and end dates. Diagram Attachments: If you’ve created and saved any diagrams for this item, they will appear as thumbnails here. Clicking a thumbnail loads it into the Diagram Workbench for viewing or further editing. 3. The Right Panel: Diagram Workbench This powerful tool allows you to visualize any work item as a formal diagram. Diagram Type Selector: Choose the type of diagram you want to generate (Sequence, Activity, or Class). Generate Diagram Button: After selecting an item and a diagram type, click this button to have the AI generate the diagram code and a visual preview. Attach\/Update Button: Once a diagram is generated, this button allows you to save it as an attachment to the selected work item. If you’ve loaded an existing diagram, this button will say “Update Diagram.” PlantUML Code Editor: A collapsible section that reveals the raw PlantUML source code for the generated diagram. You can directly edit this code, and the visual preview will update in real-time. This is perfect for fine-tuning the AI’s output. Preview Area: Displays the rendered SVG of the diagram.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[22],"doc_tag":[],"class_list":["post-926","docs","type-docs","status-publish","hentry","doc_category-documentation"],"year_month":"2026-04","word_count":378,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"vpadmin","author_nicename":"vpadmin","author_url":"https:\/\/agilien.visual-paradigm.com\/pt\/author\/vpadmin\/"},"doc_category_info":[{"term_name":"Documentation","term_url":"https:\/\/agilien.visual-paradigm.com\/pt\/docs-category\/documentation\/"}],"doc_tag_info":[],"yoast_head":"\nThe Interface: A Guided Tour - Agilien Portugu\u00eas<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Interface: A Guided Tour - Agilien Portugu\u00eas\" \/>\n<meta property=\"og:description\" content=\"The Agilien interface is divided into three main columns, each serving a specific purpose in your workflow. 1. The Left Panel: Project & Hierarchy This panel is your starting point and primary navigation hub. Project Definition: The form at the top where you describe your project to the AI. This includes the domain, context, start date, and duration. You can also access the\u00a0Example Gallery\u00a0from here. Project Hierarchy: Once a project is generated, this tree view displays the entire structure of Epics, User Stories, and Sub-Tasks. Clicking an item in this tree selects it and populates the other panels with its data. 2. The Middle Panel: Item Details This is where you view and edit the details of the currently selected item from the hierarchy. Header: Shows the item’s type (Epic, Story, Sub-Task), its title, and its Jira Key (if synced). The\u00a0Edit\u00a0button is also located here. Description: The main body of the work item. For User Stories, this describes the user’s perspective and goal. Acceptance Criteria: For User Stories, this section outlines the “Given-When-Then” conditions that must be met for the story to be considered complete. Metadata: A quick overview of the item’s priority, estimate, and scheduled start and end dates. Diagram Attachments: If you’ve created and saved any diagrams for this item, they will appear as thumbnails here. Clicking a thumbnail loads it into the Diagram Workbench for viewing or further editing. 3. The Right Panel: Diagram Workbench This powerful tool allows you to visualize any work item as a formal diagram. Diagram Type Selector: Choose the type of diagram you want to generate (Sequence, Activity, or Class). Generate Diagram Button: After selecting an item and a diagram type, click this button to have the AI generate the diagram code and a visual preview. Attach\/Update Button: Once a diagram is generated, this button allows you to save it as an attachment to the selected work item. If you’ve loaded an existing diagram, this button will say “Update Diagram.” PlantUML Code Editor: A collapsible section that reveals the raw PlantUML source code for the generated diagram. You can directly edit this code, and the visual preview will update in real-time. This is perfect for fine-tuning the AI’s output. Preview Area: Displays the rendered SVG of the diagram.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/\" \/>\n<meta property=\"og:site_name\" content=\"Agilien Portugu\u00eas\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-16T10:14:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/agilien.visual-paradigm.com\/pt\/wp-content\/uploads\/sites\/11\/2025\/10\/img_68f0c4899d9ec.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/\",\"url\":\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/\",\"name\":\"The Interface: A Guided Tour - Agilien Portugu\u00eas\",\"isPartOf\":{\"@id\":\"https:\/\/agilien.visual-paradigm.com\/pt\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/agilien.visual-paradigm.com\/pt\/wp-content\/uploads\/sites\/11\/2025\/10\/img_68f0c4899d9ec.png\",\"datePublished\":\"2025-10-15T06:05:32+00:00\",\"dateModified\":\"2025-10-16T10:14:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/#primaryimage\",\"url\":\"https:\/\/agilien.visual-paradigm.com\/pt\/wp-content\/uploads\/sites\/11\/2025\/10\/img_68f0c4899d9ec.png\",\"contentUrl\":\"https:\/\/agilien.visual-paradigm.com\/pt\/wp-content\/uploads\/sites\/11\/2025\/10\/img_68f0c4899d9ec.png\",\"width\":1413,\"height\":815},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/agilien.visual-paradigm.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Docs\",\"item\":\"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"The Interface: A Guided Tour\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/agilien.visual-paradigm.com\/pt\/#website\",\"url\":\"https:\/\/agilien.visual-paradigm.com\/pt\/\",\"name\":\"Agilien Portugu\u00eas\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/agilien.visual-paradigm.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"The Interface: A Guided Tour - Agilien Portugu\u00eas","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/","og_locale":"pt_PT","og_type":"article","og_title":"The Interface: A Guided Tour - Agilien Portugu\u00eas","og_description":"The Agilien interface is divided into three main columns, each serving a specific purpose in your workflow. 1. The Left Panel: Project & Hierarchy This panel is your starting point and primary navigation hub. Project Definition: The form at the top where you describe your project to the AI. This includes the domain, context, start date, and duration. You can also access the\u00a0Example Gallery\u00a0from here. Project Hierarchy: Once a project is generated, this tree view displays the entire structure of Epics, User Stories, and Sub-Tasks. Clicking an item in this tree selects it and populates the other panels with its data. 2. The Middle Panel: Item Details This is where you view and edit the details of the currently selected item from the hierarchy. Header: Shows the item’s type (Epic, Story, Sub-Task), its title, and its Jira Key (if synced). The\u00a0Edit\u00a0button is also located here. Description: The main body of the work item. For User Stories, this describes the user’s perspective and goal. Acceptance Criteria: For User Stories, this section outlines the “Given-When-Then” conditions that must be met for the story to be considered complete. Metadata: A quick overview of the item’s priority, estimate, and scheduled start and end dates. Diagram Attachments: If you’ve created and saved any diagrams for this item, they will appear as thumbnails here. Clicking a thumbnail loads it into the Diagram Workbench for viewing or further editing. 3. The Right Panel: Diagram Workbench This powerful tool allows you to visualize any work item as a formal diagram. Diagram Type Selector: Choose the type of diagram you want to generate (Sequence, Activity, or Class). Generate Diagram Button: After selecting an item and a diagram type, click this button to have the AI generate the diagram code and a visual preview. Attach\/Update Button: Once a diagram is generated, this button allows you to save it as an attachment to the selected work item. If you’ve loaded an existing diagram, this button will say “Update Diagram.” PlantUML Code Editor: A collapsible section that reveals the raw PlantUML source code for the generated diagram. You can directly edit this code, and the visual preview will update in real-time. This is perfect for fine-tuning the AI’s output. Preview Area: Displays the rendered SVG of the diagram.","og_url":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/","og_site_name":"Agilien Portugu\u00eas","article_modified_time":"2025-10-16T10:14:05+00:00","og_image":[{"url":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-content\/uploads\/sites\/11\/2025\/10\/img_68f0c4899d9ec.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Tempo estimado de leitura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/","url":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/","name":"The Interface: A Guided Tour - Agilien Portugu\u00eas","isPartOf":{"@id":"https:\/\/agilien.visual-paradigm.com\/pt\/#website"},"primaryImageOfPage":{"@id":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/#primaryimage"},"image":{"@id":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/#primaryimage"},"thumbnailUrl":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-content\/uploads\/sites\/11\/2025\/10\/img_68f0c4899d9ec.png","datePublished":"2025-10-15T06:05:32+00:00","dateModified":"2025-10-16T10:14:05+00:00","breadcrumb":{"@id":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/"]}]},{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/#primaryimage","url":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-content\/uploads\/sites\/11\/2025\/10\/img_68f0c4899d9ec.png","contentUrl":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-content\/uploads\/sites\/11\/2025\/10\/img_68f0c4899d9ec.png","width":1413,"height":815},{"@type":"BreadcrumbList","@id":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/the-interface-a-guided-tour\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/agilien.visual-paradigm.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Docs","item":"https:\/\/agilien.visual-paradigm.com\/pt\/docs\/"},{"@type":"ListItem","position":3,"name":"The Interface: A Guided Tour"}]},{"@type":"WebSite","@id":"https:\/\/agilien.visual-paradigm.com\/pt\/#website","url":"https:\/\/agilien.visual-paradigm.com\/pt\/","name":"Agilien Portugu\u00eas","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/agilien.visual-paradigm.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"}]}},"_links":{"self":[{"href":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-json\/wp\/v2\/docs\/926","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-json\/wp\/v2\/comments?post=926"}],"version-history":[{"count":9,"href":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-json\/wp\/v2\/docs\/926\/revisions"}],"predecessor-version":[{"id":1031,"href":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-json\/wp\/v2\/docs\/926\/revisions\/1031"}],"wp:attachment":[{"href":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-json\/wp\/v2\/media?parent=926"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-json\/wp\/v2\/doc_category?post=926"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/agilien.visual-paradigm.com\/pt\/wp-json\/wp\/v2\/doc_tag?post=926"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}