Visualizing Tableau Calculated Field Logic with Mermaid Flowcharts

This guide explains how to represent the logic of a Tableau calculated field as a visual flowchart using Mermaid, a text-to-chart tool. This can be very helpful for understanding and explaining complex calculations.

The Tableau Calculated Field:

Let's say you have a calculated field in Tableau to categorize business priority based on sales and region. Here's an example of such a calculation:

This calculation checks two conditions:

• If the Region is "Central" AND
• If Sales are greater than 20000.

If both conditions are true, it outputs "Business of interest"; otherwise, it's considered "low priority".

Creating the Flowchart with Mermaid:

Mermaid allows you to define a flowchart using simple text. The following code represents the logic of our Tableau calculated field:

flowchart TD
    A(Start) --> B(Is the Region of this Record Central?)
    B --YES--> C(Are the Sales in this Record also greater than 20000?)
    C --YES--> D(Output: Business of interest)
    B --NO--> E(Output: low priority)
    C --NO--> E

Using a tool to render the Code will give you something similar to this:

Understanding the Mermaid Code:

• flowchart TD: This declares a flowchart and sets its orientation to Top Down (TD).
• A(Start): This defines a node (a step in the flowchart) with the ID A and the text "Start". The parentheses () create a standard rectangular shape.
• -->: This creates an arrow linking one node to the next.
• B(Is the Region of this Record Central?): This is another node, representing the first decision.
• B --YES--> C(...): This shows a path from node B if the condition is "YES", leading to node C.
• B --NO--> E(...): This shows a path from node B if the condition is "NO", leading to node E.

Basic Customization (Shapes and Color):

Mermaid allows for some basic customization. For example, you can hint at different shapes for nodes (though the example above uses default rectangles). You can also influence colors, sometimes through HTML-like styling depending on where you're rendering the Mermaid diagram.

For instance, while this guide keeps it simple, you could explore:

• Diamond shapes for decisions: B{Is the Region Central?}
• Circular shapes: A((Start))

You can also use HTML within the node text (in some Mermaid renderers) or specific Mermaid syntax for styling if your platform supports it, to change text colors or node background colors. For this example, we've kept the styling minimal to focus on the flow.

Try it Yourself!