EditorialDiagramSoftware Engineering
Editorial Flowchart Designer — No Shadows, No Mermaid Slop
Separate action steps from decisions in an eight-node checkout flow. Follow the valid-cart path, inspect the named Yes/No exits and trace the repair loop without letting it cut across the main process.
Take it with you
Free PNG includes an EditorialDiagram watermark.
Layout Grammar & Anti-Patterns
Four rules for this diagram
- 01
Read the process top to bottom. Distinguish actions, decision diamonds and start/end terminals by shape or an explicit terminal tag.
- 02
Keep decisions to three exits at most. Label every decision branch; this example sends Yes toward reservation and No toward cart repair.
- 03
Use one consequential decision or happy-path segment as the focal accent. Node type must remain readable in grayscale.
- 04
Route retries outside the main flow with rounded orthogonal turns. Mark a crossing with a bridge instead of letting arrows imply a merge.
Three mistakes to avoid
- Unlabelled branches force the reader to guess which condition selects the route.
- Four or more exits from one diamond should be factored into smaller decisions.
- Using a different fill color for every node type competes with the decision hierarchy.
Engineer vs. Executive
The two renders use the same illustrative source. Executive mode groups detail deliberately; read the captions before using an overview for a technical review.
Eight nodes show both cart-validity branches and the explicit repair-to-validation loop.
Five stages describe the successful checkout journey; exception handling is summarized inside validation.
When to use another diagram instead
Questions about this diagram
Where should the invalid-cart branch rejoin the flow?
The repair action returns to Validate cart, before reservation and payment. The loop is routed outside the primary process so it cannot be mistaken for a shortcut to confirmation. The Yes and No labels make the decision explicit.
Why do the start and end use terminal tags?
The product uses a strict 4px grid and a maximum 8px corner radius. START and END tags preserve terminal meaning within that drawing contract, while action rectangles and the Cart valid diamond remain distinct. Shape and text carry the roles instead of unrelated colors.
What is removed in the Executive checkout view?
The overview groups the eight-node decision flow into five stages and summarizes the repair branch inside validation. It is useful for explaining the successful journey, but it should not be used to review exception handling. Engineer mode retains both decision exits and the retry edge.
Worked examples use illustrative data. Edited sources require an AI provider; cached previews are ready immediately.
Cached examples are free. Starter Pack is $9.9 once; Pro Pass is $8.9 per month. Every generation costs 10 credits, including one automatic geometry repair. Pricing