Flostep Client Architecture Walkthrough Setup (Onboarding)

Flostep Client Architecture Walkthrough Setup (Onboarding)

1. 01

   Create a new Flostep workspace and configure branding elements like logo and colors in the workspace settings.

   Ensure the workspace reflects your agency's identity before inviting the client, as this will appear on shared links and embeds.

2. 02

   Import the client's system architecture by pasting plain text lines into the code-to-diagram import feature.

   Use the drag-and-drop canvas to add components such as Frontend, Service, Database, and External APIs, then connect them with labeled interactions.

3. 03

   Enable step-through walkthrough mode to sequence the interactions for client review.

   This presents the flow sequentially, making it easier for the client to follow and provide feedback during the design review.

4. 04

   Leverage MCP integration with Claude or Cursor to generate additional diagram elements from code or descriptions.

   This speeds up the mapping process, especially for complex architectures, and ensures accuracy.

5. 05

   Share the diagram via a public read-only link or embed it in Notion or Confluence for client access.

   Use the share settings to control access and ensure the client can view the walkthrough without editing permissions.

6. 06

   Collect client feedback using the comments feature on shared links.

   Address any changes in the diagram and update the walkthrough sequence accordingly, then re-share the updated version.