IziFlow

IziFlow automates the creation of user flow diagrams through an AI-powered interview process. Our AI assistant conducts a guided conversation to understand your company, users, and flow requirements, then generates professional visual diagrams instantly.

The IziFlow workflow is completely hands-off: have a conversation with our IziFlow Copilot who interviews you about your needs, validates the proposed flow step-by-step, and generates the final YAML definition. Simply copy and paste into the plugin for instant visual creation.

Features

• AI-Powered Interview Process: Guided conversation that understands your context, users, and flow requirements without any syntax knowledge needed.
• Step-by-Step Validation: The AI proposes flows and validates each decision point with you before generating the final code.
• Zero Manual Coding: Complete automation from interview to YAML—no manual formatting required.
• Instant Visual Creation: Transform AI-generated YAML into professional flow diagrams with one click.
• Theme Customization: Choose between light and dark themes with customizable accent colors.
• Rich Node Content: Add detailed descriptions, layout hints (anchors, offsets, magnets), and metadata-driven names for comprehensive documentation and history tracking.

---

How to Set Up and Run the Project

Prerequisites

• Node.js (which includes npm)
• Figma Desktop App

Setup

1. Clone the repository:

   git clone https://github.com/luskizera/iziflow-plugin.git
   cd iziflow-plugin

2. Install dependencies: The project uses npm for package management.

   npm install

3. Build the UI:

   npm run build

4. Build the plugin code:

   npm run buildcode

5. Load the plugin in Figma:

   • Open the Figma desktop app.
   • Open a FigJam file.
   • Go to Plugins > Development > Import plugin from manifest...
   • Navigate to your project directory and select the dist/manifest.json file.

How It Works

🤖 Step 1: Interview with IziFlow Copilot

The IziFlow Copilot conducts a guided interview to understand your needs:

• What type of flow do you want to create?
• What's your company's niche and industry?
• What's your brand's tone of voice and style?
• Who are your target users and their context?

📝 Step 2: AI-Generated Flow Validation

The Copilot suggests a complete flow and validates each step with you:

• Proposes the flow structure and main steps
• Asks for confirmation on each decision point
• Refines based on your feedback
• Generates the final structured YAML automatically

🎨 Step 3: Generate in Figma

1. Copy the final YAML from the Copilot (or from the provided sample flows under docs/flows-examples)
2. Open the IziFlow plugin in FigJam
3. Paste the generated code
4. Choose your theme and accent color
5. Click "Create Flow" - your visual diagram is ready!