Arresting and visualizing complex conditional logic using best practice boxes-and-arrows

Experiment

After exhaustive research and experimentation, I have yet to come across an AI agent or SaaS platform that can arrest and visualize complex, conditionally-saturated funnels with any reliable detail or consistency while adhering to established best practices.

Boxes and Arrows
Visual Vocabulary
Wayfinding

Experiment goals

Do flow diagramming best practices exist? If so, where are they, who defined them and which tool can I use to apply them to my work?
  • Seek out flow diagramming best practices
  • Challenge emerging technologies and existing SaaS platforms for their ability to execute against those best practices
  • Evaluate the generated artifacts for their value-add potential

Historical context

Standing on the shoulders of giants
Did you know that humanityโ€™s fascination with logic dates back to Socrates? From Plato, Leibniz, Boole… the investigation into human logic is a fascinating story. Those lessons and principles are still applicable to the design work we do today. The essence of a best practice task flow diagram is its ability to embrace the concepts of And, Or and Not.
  • This AND That
  • These NOT Those
  • This AND That OR Those
  • IF This OR That THEN NOT Those
A still frame displaying the words, And and Not as written on a chalkboard from the documentary, The Genius of George Boole – How to be a Genius.

Principles-first

Foundations
Before subjecting and evaluating popular SaaS platforms and emerging AI agents for their value-add potential, we should first agree on the principles and best practices to use for those evaluations.
The principles I use to determine the standards I choose for my flow artifacts are described below:
TopicPrinciple / Description
Artifact TypesThe symbology should be capable of producing:

Sitemaps: How information is organized
Flows: How a user might move from position A to position B (often involving a conversion)
Mindset: Design vs. AlignmentArtifacts produced with the symbology should be considered an alignment artifact absent of erroneous visual stimuli that might distract from the relational or directional observations being made in the artifact.
Repeatable / ReliableThe symbology used in the artifact should have clear definitions and each artifact that leverages the symbology should do so the same way every time a new artifact is created. If the author of the artifact is creating new symbology each time a new artifact is created, the symbology fails and falls back to being merely arbitrary geometric shapes.
Interaction DesignWhen describing interaction design, the artifact must successfully communicate how the user flows through a defined task(s), and what the discrete steps are within these tasks (wayfinding).
FidelityAs an alignment artifact, the level of detail needed should be as minimal as possible. Adding multiple and vibrant color or UI controls within the artifact can lead to unnecessary distractions while trying to align cross-functionally. The idea of the artifact is to arrest and visualize conditional logic (or relational hierarchies) and show user wayfinding and experience flow. Color is not required to accomplish this and only adds more time to build the artifact by introducing visual clutter.
Embraces Boolean ConceptsConditional logic is rooted in binary choices that are chained together to create an end-to-end flow. Concepts of binary decision-making patterns will allow the following terms and cognitive patterns to be visualized: AND, OR and NOT
Swim LanesThe ability to represent swim lanes (different environments, platforms, etc.) involved to complete a task must be possible to include in the artifact when it is helpful to do so.

Best practice sources

👎
Source 1: International Standard ISO 5807
Information processing – Documentation symbols and conventions for data, program and system flowcharts, program network charts and system resources charts.
These standards, established by the International Organization for Standardization (ISO) and previously by the American National Standards Institute (ANSI), are detailed inย ISO 5807:1985ย and provide conventions for documenting data, programs, and systems. These standards inspire the symbology contained in FigJam, LucidCharts and other popular flow diagramming tools. In this designer’s opinion, these ISO standards fall short of what is needed in order to design out proper sitemaps and, more importantly, for arresting and visualizing complex task flows from a user experience point of view.ย 
Partial screen capture of the ISO 5807 cover page.
👍
Source 2: JJG Visual Vocabulary
In 2000, Jesse James Garrett introduced a set of flow-diagramming best practices that reimagined electrical schematic conventions for interaction and information design. By assigning logic-based definitions to simple geometric shapes, he transformed them into a symbolic language specific for expressing the user experience layer of relational hierarchies and transactional funnels. These symbols, when combined correctly and consistently, allow information architects and interaction designers to articulate complex, condition-heavy funnels (from the user’s point of view) with clarity and precision.

Findings

👎
SaaS: The pitfalls of today’s traditional SaaS options
After auditing two SaaS platforms, I found that each used symbology inconsistentlyโ€”and none provided a clear, comprehensive definition of what each geometric shape represented or how it related to a logical operation. Simply labeling a trapezoid as a โ€œtrapezoidโ€ offers little value to a designer (especially newbies) trying to use a trapezoid meaningfully in a diagram.
  • Today’s SaaS platforms fail to provide definitions for each geometric shape contained in their libraries failing to encourage how each shape might be leveraged to solve conditional branching and logical operations
  • Today’s SaaS platforms encourage designers to consider flow diagrams as a design artifact (versus an alignment artifact) encouraging creative autonomy which ultimately leads to diagrams saturated with unnecessary ornamentation and visual distraction
  • Today’s SaaS platforms fail to establish their own internal best practices for use or embrace other established versions beyond the 5807 standard which is not optimized for expressing user experience
👎
Artificial Intelligence: The pitfalls of AI agents and wizards
At present, AI models still struggle with logic and reasoning. Some models can generate flow diagrams with basic reliability, but asking them to communicate logic using a predefined symbology while adhering to best practices remains a foolโ€™s errand. Ask any of the popular AI models and agents to model the same scenario twice and youโ€™ll likely get two completely different diagrams. This inconsistency underscores a simple truth: for now, humans remain the more reliable producers of logical structures.

My preference

👍
I plan to keep using traditional, manual methods
Producing flow diagrams by hand allows me to submerse myself into the problem space. For me, the reward isn’t the flow diagram itself (it’s an alignment artifact)… it’s the empathy and awareness gained from having spent the time putting one together. Here are some of the excuses I’ve heard in the past for not adopting best practices:
  • “Best practices don’t matter…”
    • You’re going to need to define some sort of system to model the flow after, so why not established best practices?
    • If you’re planning to produce more than 1 flow in your lifetime, redefining flow symbology and just “winging it” each time doesn’t make sense… the hard work of defining a symbology and visual vocabulary has already been done for you.
  • “Learning best practices takes too much time…”
    • So does the churn involved with not clearly articulating important scenarios, way-finding and the logic involved that will drive the overall experience branching and interaction design.
    • If you haven’t taken the time to learn and practice them a few times, you can’t really argue against them.

Designer resources


If youโ€™re tackling a complex, high-risk funnel, applying best practices to your flow diagrams isnโ€™t just smart; itโ€™s essential. The first few diagrams may challenge how you think about conditional logic, but thatโ€™s the point. Once you get past the learning curve, youโ€™ll never want to generalize or guess your way through a transactional flow again. Youโ€™ll have the clarity and confidence to capture complexity just as efficiently as you once improvised it.
Below are tools and resources to help you get started. The FigJam plugin includes a helpful cheat sheet and detailed symbol descriptions.

SaaS Review – FigJam

FigJam’s native flow diagramming library uses the International Standard ISO 5807
โญฃ
Generic shape labels
Missing connectors
Connectors
Context unaware

SaaS Review – LucidChart

LucidChart’s native flow diagramming library uses the International Standard ISO 5807
โญฃ
Geometric shapes
International Standard ISO 5807
Context aware
Specification is confusing
More guidance needed
Extraneous and confusing

SaaS Review – LucidChart

LucidChart’s native flow diagramming library uses the International Standard ISO 5807
โญฃ
Geometric shapes
International Standard ISO 5807
Context aware
Specification is confusing
More guidance needed
Extraneous and confusing

The Genius of George Boole – How to be a Genius

MultiViTech. The Genius of George Bool. How to be a Genius. YouTube.