Back to Tools

Process Flow

Transform process narratives into editable IIA-aligned flowchart visualizations using AI and a privacy-preserving static HTML viewer.

Process Flow app showing an interactive flowchart with risks and controls

How It Works

Use AI to convert a process narrative, walkthrough notes, or other documentation into a structured flowchart with risks and controls. The output is a fully interactive, privacy-preserving HTML file that runs entirely in your browser—no data leaves your machine.

Privacy by design: Process Flow is a static HTML file. Your data stays in your browser and is never sent to any server. You can work offline and share the file directly with your team.

Tutorial: Create a Process Flow with Microsoft Copilot

1
Gather your process documentation

Collect your process narrative, walkthrough notes, or SOPs. You can also attach PDFs or images of existing documentation directly to Copilot.

2
Open Microsoft Copilot and paste the prompt

Open Microsoft Copilot and paste the following prompt along with your process documentation:

Analyze the attached process documentation and create a process flow diagram with risks and controls. For each step in the process, identify: - The step name and description - Any risks associated with the step - Any controls that mitigate those risks Output ONLY a JSON object in this exact format: { "nodes": [ { "id": "step-1", "title": "Step Name", "description": "What happens in this step", "risks": [ { "id": "risk-1", "name": "Risk description", "controls": [ {"id": "ctrl-1", "name": "Control description"} ] } ] } ], "edges": [ {"id": "edge-1", "source": "step-1", "target": "step-2", "label": ""} ] } Guidelines: - Create sequential edges connecting steps in process order - Use branching edges where the process splits - If no risks or controls are identified for a step, leave the risks array empty - Keep titles concise (3-6 words) - Keep descriptions to one sentence
3
Copy the JSON output

Copilot will return a JSON object with your process steps, risks, and controls. Copy the entire JSON output.

4
Open Process Flow and import

Open the Process Flow app, click "Generate with LLM" on the welcome screen, and paste the JSON into the input area. Click "Import & Start".

5
Review and edit your flowchart

Your process flow appears as an interactive diagram. Double-click any step to edit its title, description, risks, and controls. Drag steps to rearrange. Click "Auto Layout" to automatically arrange the diagram.

6
Save your work

Click "Save" to export. Choose "Save Graph" to download a standalone HTML file you can share with your team, or "Save Data" to export the JSON for future editing or AI processing.

Launch Process Flow Download Source Code

Alternative: Use with Claude Code

If you have access to Claude Code, you can use the Process Flow Generator skill to create flowcharts directly from your terminal. The skill reads your documents, generates the process flow, and outputs a standalone HTML file.

Download Claude Code Skill
Open source under the MIT License. Free to use, modify, and distribute.