Build editable diagrams from the Perspective views you already use. This example combines the vCortex Flow Diagram component with an AI-assisted editing panel for nodes, handles, and connections.
See the workflow
Flow Editor workflow demo · 1 min 14 sec.
Turn your Perspective views into interactive diagrams.
Real Perspective views as nodes
Reuse equipment views with their parameters and bindings. A valve, tank, or instrument can remain a Perspective view inside the diagram.
Edit diagrams in the browser
Place and resize nodes, configure handles, and edit connections in the Perspective session. Routine layout changes do not require opening Designer.
Save reusable project views
Save the layout to project view resources, or create a separate drawing with Save As. The diagram remains structured configuration that can be edited again.
ZIP · 322 kB · Ignition Perspective + vCortex required
Practical control without hiding the detail
Simple first. Advanced when needed.
Keep labels, dimensions, and common appearance settings close to the selection. Open Advanced for IDs, view parameters, precise styling, and JSON.
Control every connection
Name handles, choose their side and position, and adjust connection labels, line styles, and arrowheads to suit the equipment layout.
Refine and reuse your work
Use Undo/Redo while editing and JSON import/export to transfer layouts. Save keeps the previous view data, and checks for project changes before overwriting a resource.
A simple editing example
- Place three nodes. Start with an inlet, a process step, and an outlet.
- Name the handles. Select the process node, open Handles, enter a new ID such as
outlet, give it a name, and use Add Handle. - Make the connections. Connect the inlet to the process and the process to the outlet. Adjust line labels and arrowheads.
- Refine the node. Change its label or dimensions. For a custom view node, configure the view path and parameters.
- Check persistence. Save the diagram, reload the view, and confirm that the layout and connections are retained in your development project.
Where AI helped
AI assisted with the view structure, scripting, event handling, and repeated improvements to the editing workflow. Requirements were refined as the example was used: keep routine controls simple, move detailed options into Advanced, preserve handle selection, and make save feedback visible.
The underlying diagram rendering comes from the existing vCortex component. The example is an AI-assisted implementation around that component; it does not replace the module or the need to review and test generated code.
Requirements and dependencies
- An Ignition Gateway with Perspective and the vCortex module installed.
- The development environment uses Ignition 8.3.7 and vCortex 1.14.63.2026102012. Verify behavior with the versions you use.
- Custom view nodes need their referenced Perspective views and parameters. If those views use tags or other project resources, include those dependencies too.
- The editor scripts are stored with the FlowEditor view resources. Saving a layout updates project resources and needs to be tested in the target development project.
Start with the included simple drawing
Import the ZIP into a separate development project. Open Tools/FlowEditor/Drawings/Example Process in Designer first; this drawing contains three nodes and two connections and does not require the site-specific P&ID tag providers. Use Tools/FlowEditor/Canvas for an empty starting point.
The larger TestCanvas layout and included P&ID views are reference material. They use source-project tags and other resources, and 15 connections in that layout have missing endpoint nodes. Review or reconnect those edges before using the larger layout. The downloadable ZIP omits the previous layout backup; the editor can create a new backup when you save.
Try the same approach
Start with a small diagram and one editing task. Give your AI assistant the vCortex AI Guide, describe the required behavior, and review the generated configuration and scripts in a development project. Add features in small steps so selection, connections, and persistence can be checked after each change.
Development example. Test custom views, handle selection, connection behavior, and save/reload before using the example in an operational application. Compatibility with versions other than the development environment has not been established.
Topics: vCortex · Perspective · AI-Assisted · Flow Diagram