I need to replicate an existing flow application to Angular. The flowchart consist on simple blocks with a single input and multiple outputs (depending on their type). Every block displays the port names, its type (name and icon) and its step name. Please see the attached image.
I'm trying to do this using Kendo diagrams based on the following guides:
https://www.telerik.com/kendo-angular-ui/components/diagrams/shapes#changing-the-shape-visuals
I think the header/icon/footer schema can be replicated using the visual function of the ShapeDefaults option of the DiagramComponent (kendo-diagram). However, I don't find a way to do the same with the block ports (Connectors). I would like to:
- Show the port name insede the block
- Make the the ports always visible (not only when focused)
- Style the ports according to their type (input/output)
Is there an embeded way to do this?
Thank you in advance for your help.
1 Answer, 1 is accepted
Hi Adrian,
I am not sure that I understand the description and the image correctly.
Which of the elements are the port name, type, and step name? How does your current flow look? This way, we can gain better context and suggest more valuable assistance.
I tried to replicate the image you attached with the Kendo Angular Diagram, and here is the end result:
https://stackblitz.com/edit/angular-qnmebrsa
Please check out the demo and let me know if I am missing something or if any follow-up questions arise.
Regards,
Martin Bechev
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Thank you a lot, Martin. I'm sorry if I was not clear enough, but this is exactly what I needed.
I managed to display the models (without styling), but I got another problem. Maybe you can help me with that too. I used the layout parameter of the DiagramComponent to auto distribute the shapes (type: 'tree', subtype: 'right'), but the 'cascading' connections some times overlap the shapes or get in/out the shape in the "opposite" direction (see the attached picture). I made some progress on fixing that by modifyng the "locks" and "definers" of the problematic Connection items. Is there a better way to do this?
Hi Adrian,
I am happy that the demo was found helpful.
Regarding this question, the root cause is a conflict between hardcoded connector directions and auto-layout repositioning. When layout moves shapes, your fromConnector: 'Left' / toConnector: 'Top' etc. become wrong relative to the new positions — but the diagram still honors them, causing backwards routing.
The clean fix is to remove connector hints from connections when using layout. The layout algorithm will then auto-select the best entry/exit point for each shape based on actual positions. Combine this with diagram-level routing to avoid shape overlaps. [routing]="true" activates the diagram's built-in path router that reroutes connections around shape boundaries after layout.
Why locks/definers are a dead end at scale:lock - prevents the layout from touching a connection's path — so it stays at the pre-layout position, which is even more wrong
definer - points force waypoints, but you'd need to recalculate them for every shape position the layout produces, which is manual work that defeats the purpose of auto-layout
If you need cascading-style right-angle bends specifically (not just avoiding overlap), switch all connections to type: 'elbow' instead of 'cascading'. Elbows use two right-angle bends but respect the auto-selected connectors, while cascading explicitly uses the connectors you provide.
Rank 1
Hi, Martin. Thanks again. I attached a new picture with the improved style.
I can not remove the connector hints because the lines must connect specific input/outputs of the blocks. Besides, I didn't find neither the [routing] input in the diagram component or the 'elbow' type of the connections (only 'cascading' and 'polyline'). Does this require another library or directive?
Hi Adrian,
Accept my appologies for the mistake, the elbow isn't a. supported connection type by Kendo Angular Diagram.
The real issue that causes the connections passing through the shapes, demonstrated in the screenshot, is caused by auto-layout, and connector hints are fundamentally incompatible.
I can try suggesting a more tailored solution if you can send us an updated StackBlitz that reproduces the scenario shown in the screenshot.
In the meantime, you can try dropping the layout input, keep the connector hints.
Your JSON might already have explicit x/y/width/height for every shape. If you remove [layout] entirely, shapes render at those exact positions, and your fromConnector/toConnector hints will route correctly. "cascading" then works as intended — it auto-routes right-angle segments between the specified connector points without needing any manual waypoints.
Option 2 is to switch to a "layered" layout and remove connector hints. The "layered" layout is designed for directed flowcharts and produces cleaner results than "tree" for your use case. Without connector hints, it will pick entry/exit points based on flow direction.
To provide better support assistance on this case, please send us a runnable StackBlitz that we can debug.
Regards
Rank 1
Hi Martin, taking over from Adrian on this issue. I have used your StackBlitz as a base and modified it to show how we're building the diagrams and show you where it doesn't look right.
https://stackblitz.com/edit/angular-qnmebrsa-v21g1mbp
In this example, the connections from the Out connector of 2 of the steps all the way to the right go thru the shape. The user can fix them manually by dragging the dots in the line, but I can't seem to find a way to do it programmatically. I tried to persist the user selection and then restore it next time the diagram is loaded, but I can't find a way to do that either.
Rank 1
I feel like this question has morphed from its original topic and is not receiving much attention. I'll create a new post.
Hi Manolo,
Thank you for the prepared demo and for showing how the connection from Save Transition Date In to Create New Contact Out goes through Save Transition Date.
To avoid this and still use cascading connections, update fixBackwardConnections to also handle Create New Contact → Save Transaction Data by routing it below both sibling shapes and then approaching the In connector from the left, using two locks.
Here is the updated demo:
https://stackblitz.com/edit/angular-qnmebrsa-mukfau53
The two-lock strategy for Create New Contact → Save Transaction Data:
- Lock 1 { axis: 'y', value: belowY } — applyLock moves vertically: Point(last.x, belowY). The path drops below the bottom edge of both sibling shapes.
- Lock 2 { axis: 'x', value: leftX } — applyLock moves horizontally: Point(leftX, belowY). The path swings to the left of both shapes.
From that point (leftX, belowY) the cascading router reaches the In connector of Save Transaction Data (which is on the left side, bounds.x + 6) by going up along the left side and then turning right into the connector — it never crosses the shape interior.
The check if ((con as any).locks?.length) { return; } at the top of the loop means once a user manually drags a segment (which sets locks), the programmatic fix won't override it. Those user-set locks are then persisted via onDiagramChange and restored on reload.
Regarding the question handling, the response time is 72h, excluding holidays. This might make it seem like it's forgotten, but we are notified and track forum posts.
Please check the demo and let me know if you have any follow-up questions.
Regards