App diagrams

  • Updated on Jul 22, 2025
  • Published on Feb 12, 2025
  • 4 minute(s) read
  • PT
  • Lianna Churchill
 Prev Next

Overview

Tulip apps can be complicated to explain to a teammate, making it difficult to understand the entire logic of an app.

This feature allows you to diagram an app's functionality within Tulip as well as export it to free products outside of Tulip. You and your teammates can inspect app logic to explain or learn about what is happening within an app.

All recommended external tools preserve the privacy of your data – they do not save anything.

App Diagrams

To view a diagram of high level app functionality, choose the Diagram button in the top right of the App Overview page.

image.png

This will show you the relationship between:

  • Steps
  • Transitions
  • Table Record Updates
  • Connector Function Calls

You can use this diagram to:

  • Explain to a teammate what is happening within an app
  • View the order of data updates and operator actions
  • Create documentation for each version of an app

App Diagram Syntax

App diagrams vary depending on how complex your app is.

Example:
image.png

The syntax should closely resemble process flow diagramming language:

  • Circle: Either the "App Start" or an app completion, with the destination app and step filled in.
  • Box: A step in the app, with the step name within the box
  • Solid line: A transition between steps, with the name of the trigger that causes the transition included on the line.
  • Database symbols: Either:
    • All of the table record updates to a specific placeholder on a specific step
    • A connector function call that happens on that step.
    • The symbol just lists the fields that are used for both. The values that map to those fields are not listed.

Visual Options

The following toggles on the left side of the screen can be modify the visuals:

  • App Version: Choose the development version or a previously published version
  • Content: Choose which connector functions and table updates that you want to view.
  • Orientation: Choose a horizontal or vertical diagram pattern
  • Diagram Complexity: Change the rendering algorithm for either complex or simple diagrams.

Exceptions

image.png

Exception- Steps with many incoming transitions
You may also noticed that certain steps are broken out from the diagram. These are steps that have at least 8 transitions going into them, and therefore would contort the diagram and cause many lines to be drawn. So, we chose to break them out separately, and usually the name of the step is a good indication that it is a "utility step" that is referenced in many places.

In the example above, the "Comment" step is a utility step that is referenced in many places.

Exception- step open trigger transitions
Transitions within triggers that fire upon "step open" are not considered for the diagram. We do this to avoid drawing many arrows that may only exist in specific circumstances, and are not instrumental to the key flow of the app.

Export App Logic

From the App summary view, click the three-dot-menu and select Inspect App.

image.png

You can choose to either view a diagram of an app or see all the Trigger logic in one place.

image.png

Trigger Tree

A trigger tree is a tree-like view of an app in JSON that shows the following nested concepts in an app:

  • Step
    • Trigger
      • Conditions
        • Trigger actions

This requires technical ability to read JSON, but you will be able to:

  • More easily debug apps by seeing all triggers in an app in one place
  • Build a custom internal app for viewing app behavior
  • Use AI to better understand the functionality of an app

View a Trigger Tree

  1. Choose Trigger Tree, then select all the trigger actions you would like to visualize.

  2. Click Export, and then you will see a JSON file.

  3. Copy the content in the file.

  4. Paste the content into a JSON viewer, like JSONSea.

Trigger trees vary depending on how complex your logic is.
Example:
image.png