Skip to main content
SimilarExport ZIP
100%

Fork of SaaS Infrastructure

• Draft0🔗 Unlisted
CCurran Kelleher
Last edited Dec 14, 2025
Created on Dec 14, 2025

This visualization maps the B2B SaaS user journey from landing page through free trial signup, expiration, upgrade, and premium subscription. Mermaid.js renders the flowchart from a diagram.mermaid file, with Inconsolata font management via the Font Loading API. The diagram uses color-coded states to represent conversion opportunities and friction points, including trial warnings, feature limits, and payment processing stages.

AI-generated description

B2B SaaS User Onboarding Flow

This diagram visualizes the complete user journey in a B2B SaaS application, from initial landing page through free trial signup, trial expiration, hitting free tier limits, and finally upgrading to a paid plan.

Flow Stages

1. Landing & Signup (Blue)

  • User lands on marketing website
  • Clicks "Try Free Trial" button
  • Creates account with email/OAuth

2. Free Trial Period (Green)

  • 14-day trial with full feature access
  • User explores product functionality
  • All premium features unlocked

3. Trial Expiration Warning (Orange)

  • Day 14 approaches
  • Email notification sent
  • In-app alert displayed
  • Option to upgrade

4. Trial Expired / Free Tier (Red)

  • Trial ends, access downgraded
  • Free tier limits activated
  • Feature restrictions applied

5. Free Tier Limits (Red)

  • API rate limits exceeded
  • Storage quota reached
  • Team member slots maxed out
  • Each limit shows upgrade option

6. Upgrade Flow (Purple)

  • User sees pricing modal
  • Selects pricing plan (Starter/Pro/Enterprise)
  • Enters payment information
  • Payment processed

7. Premium Active (Dark Green)

  • Upgrade complete
  • Full feature access restored
  • Monthly recurring billing
  • Premium features available

Key Conversion Points

  1. Free Trial Signup - Initial conversion from visitor to user
  2. Trial Expiration - First monetization opportunity via email/reminder
  3. Hit Limits - Friction triggers upgrade prompts
  4. Payment Success - Customer lifecycle begins

Running the Diagram

Open index.html in a browser to view the onboarding flow diagram.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of SaaS Infrastructure

This example visualizes the end-to-end product lifecycle, from ideation through post-launch, using a Mermaid flowchart. The diagram groups phases into colored subgraphs and connects tasks with directional arrows, including a feedback loop back to ideation. It is rendered in the browser via the Mermaid JavaScript library, which fetches the diagram definition from a local `.mermaid` file and converts it to SVG. Styling is applied through CSS and JavaScript, using the Inconsolata font and custom theme variables to ensure monochrome nodes, black borders, and consistent typography.

CCurran Kelleher
87% match
Loading thumbnail…

SaaS Infrastructure

This example shows a full-stack web application architecture through a flowchart diagram rendered with Mermaid.js. The diagram organizes services into four labeled layers—Client, Application, Infrastructure, and External Providers—and connects them with directional arrows indicating relationships such as HTTP requests, database queries, and token verification. The code fetches the diagram definition from a separate `diagram.mermaid` file and renders it dynamically using Mermaid's JavaScript API, applying custom styling through Inconsolata font and theme variables. The implementation relies on `fetch` to load the source and `mermaid.render` to generate the SVG output.

CCurran Kelleher
78% match
Loading thumbnail…

Fork of Styled Mermaid Diagram

This example presents a state diagram built with Mermaid.js, visualizing a complete sales and delivery pipeline with inbound engine, entry paths, intake qualification, and multiple sales paths. It highlights feedback loops that route leads through nurturing touchpoints and qualification gates, ultimately leading to closed-won deals or blocked outcomes. The code fetches the diagram definition from `diagram.mermaid`, renders it via `mermaid.render`, and applies custom styling to ensure consistent font rendering. The visualization uses the Inconsolata font, loaded through the Font Loading API before Mermaid initializes.

CCurran Kelleher
76% match
Loading thumbnail…

Fork of Styled Mermaid Diagram

This example shows a Mermaid.js state diagram that depicts the lifecycle of a data loading process (Idle, Loading, Succeeded, Failed) for a web application. The visualization is rendered dynamically by fetching the diagram definition from a separate `.mermaid` file and passing it to Mermaid's `render` method. The code uses Mermaid's `initialize` API to configure theme variables and spacing, and it waits for the Inconsolata font to load before rendering. After the render, the HTML is post-processed to enforce custom styling on SVG elements, including specific font sizes and black fills for state and edge labels.

CCurran Kelleher
72% match
Loading thumbnail…

Fork of Mermaid Starter

This example presents a Mermaid.js flowchart depicting the VizHub Studio integration workflow, showing how a cloud platform, client agency, and publishing pipeline connect. The diagram defines three subgraphs with custom CSS styling classes for visual distinction. It uses the Mermaid `render` function to convert a diagram definition string into SVG, which is then inserted into the page via `innerHTML`. The page is styled using a separate CSS file.

CCurran Kelleher
71% match
Loading thumbnail…

Mermaid Starter

This visualization displays a simple flowchart using Mermaid, rendering a sequence of processes and decisions from a start node to an end node. The diagram is generated in an HTML page using Mermaid's `initialize` and `render` APIs, with an import map loading the library from a CDN. The diagram definition is stored as a string and rendered into a styled container with a grayscale theme. The example supports easy modification of the diagram syntax through the JavaScript code.

CCurran Kelleher
69% match
Loading thumbnail…

Fork of Styled Mermaid Diagram

This example shows a state diagram for data loading with four states—Idle, Loading, Succeeded, and Failed—and the transitions between them. It uses Mermaid.js to parse the `stateDiagram-v2` definition and render the SVG, with custom styling applied via `styleSVGText` and `scaleSVG`. The code waits for the Inconsolata font to load using the Font Loading API before rendering, and overrides Mermaid’s default styling (text fill, font family, and label backgrounds) through CSS and JavaScript to ensure visual consistency.

CCurran Kelleher
68% match
Loading thumbnail…

Fork of Mermaid Starter

This example presents a decision tree that maps file-analysis questions to the appropriate runtime version for the @vizhub/runtime project. The flowchart asks sequential yes/no questions about ES module usage, Svelte components, and dependency bundling, culminating in recommendations for Runtime v1 through v4. It renders the diagram using Mermaid.js, initializing the library with a default theme and basis curve, then calling `mermaid.render()` to convert the text-based flowchart definition into inline SVG placed in the page. The static HTML file displays the resulting diagram centered within a bordered container.

CCurran Kelleher
67% match