tmcfarlane · tmcfarlane · Apr 13, 2026 · Apr 12, 2026 · Apr 12, 2026 · Apr 13, 2026
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,5 @@ dist-ssr
 *.sln
 *.sw?
 .vercel
+
+.omc/
diff --git a/README.md b/README.md
@@ -1,160 +1,147 @@
-<p align="center">
-  <a href="https://github.com/tmcfarlane/flowchart">
-    <img src="docs/screenshots/flow.gif" alt="FlowChart demo" width="500" />
+<div align="center">
+
+<p>
+  <a href="https://flowchart.zeroclickdev.ai/">
+    <img src="docs/screenshots/flow.gif" alt="FlowChart AI — Free AI-powered flowchart designer" width="560" />
   </a>
 </p>
 
-<p align="center"><strong>FlowChart</strong> by <strong>ZeroClickDev</strong></p>
-<p align="center">A modern flowchart designer with optional AI-assisted generation.</p>
+<div style="font-size: 2.5em; font-weight: 800; letter-spacing: 0.08em; line-height: 1.1;">
+  <strong>FLOWCHART AI</strong>
+</div>
 
-<p align="center">
-  <a href="https://github.com/tmcfarlane/flowchart/blob/main/LICENSE"><img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square" /></a>
-  <a href="https://github.com/tmcfarlane/flowchart/stargazers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/tmcfarlane/flowchart?style=flat-square" /></a>
-  <a href="https://github.com/tmcfarlane/flowchart/issues"><img alt="Issues" src="https://img.shields.io/github/issues/tmcfarlane/flowchart?style=flat-square" /></a>
-</p>
+<div style="font-size: 1.1em; margin: 8px 0;">
+  <strong>Describe your idea. Get a flowchart.</strong>
+</div>
 
-<p align="center">
-  <a href="https://flowchart.zeroclickdev.ai/">Live demo</a> |
-  <a href="/api">API</a> |
-  <a href="/src">UI</a>
-</p>
+The open-source flowchart designer that turns plain-English prompts into polished diagrams in seconds.<br>
+AI generation &nbsp;|&nbsp; 663+ Azure icons &nbsp;|&nbsp; Presentation mode &nbsp;|&nbsp; Export to PNG, SVG & GIF
+
+<br>
+
+[![Try it Live](https://img.shields.io/badge/Try_it_Live-00c896?style=for-the-badge&logo=vercel&logoColor=white)](https://flowchart.zeroclickdev.ai/)
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
+[![GitHub Stars](https://img.shields.io/github/stars/tmcfarlane/flowchart)](https://github.com/tmcfarlane/flowchart/stargazers)
+[![Issues](https://img.shields.io/github/issues/tmcfarlane/flowchart)](https://github.com/tmcfarlane/flowchart/issues)
+[![Free](https://img.shields.io/badge/Price-Free-brightgreen)](https://flowchart.zeroclickdev.ai/)
+<br>
+
+Created by <a href="https://zeroclickdev.ai/">ZeroClickDev</a>
+
+</div>
 
 ---
 
-## What is this?
+## Features
 
-FlowChart is a single-page web app for building flowcharts on an interactive canvas. It supports custom node types (step, decision, note, image), rich edge styling, presentation mode, and an optional AI assistant that can generate or refine diagrams via Azure OpenAI.
-It’s styled to match the ZeroClickDev design system (dark-first charcoal UI with teal/cyan accents). 
+- **AI-powered generation** — describe what you want in plain English, get a structured flowchart in seconds
+- **Free to use** — no sign-up, no paywall, no limits on the canvas
+- **Export to PNG, SVG & animated GIF** — share diagrams in docs, slides, or README files
+- **Presentation mode** — step through your flowchart with arrow keys, perfect for walkthroughs
+- **663+ Azure icons** — official [Azure icon library](https://learn.microsoft.com/en-us/azure/architecture/icons/) built in, auto-applied by AI
+- **Dark mode** — charcoal UI with teal/cyan accents, toggleable in one click
+- **Polished canvas UX** — snap-to-grid, undo/redo, copy/paste, minimap, multi-select
+- **Multiple node & edge types** — step, decision, note, image nodes with editable labels and animated edges
+- **AI proposal preview** — review, regenerate, and tweak AI suggestions before inserting
+- **Deploy anywhere** — one-click Vercel deploy, serverless API keeps credentials safe
 
-## Screenshots
+<details>
+<summary><strong>Screenshots</strong></summary>
 
-### ZeroClickDev “vibes”
+### AI Generation
 
 Tell Flowchart what you want to make and watch it magically jump start you.
 
 ![Tell Flowchart what you want to make and watch it magically jump start you](docs/screenshots/vibes.png)
 
-### Azure icons
+### Azure Icons
 
-Default support for official [Azure icons library](https://learn.microsoft.com/en-us/azure/architecture/icons/). AI generated nodes will also include Azure Icons if applicable.
+Official Azure icons are automatically applied to AI-generated nodes.
 
-![Default support for official Azure icons library. AI generated nodes will also include Azure Icons if applicable.](docs/screenshots/azureicons.png)
+![Default support for official Azure icons library](docs/screenshots/azureicons.png)
 
-### AI proposal preview
+### AI Proposal Preview
 
-AI proposal view to review, regenerate, and modify prior to adding your new flowchart to the canvas. This can be helpful with large complex charts, where small iterative changes are best.
+Review, regenerate, and modify AI suggestions before adding them to the canvas.
 
-![AI proposal view to review, regenerate, and modify prior to adding your new flowchart to the canvas.](docs/screenshots/ai-proposal.png)
+![AI proposal view to review, regenerate, and modify prior to adding your new flowchart to the canvas](docs/screenshots/ai-proposal.png)
 
 ### Presentation Mode
 
-Presentation Mode will walk you through your flowchart from start to finish. This looks and feels amazing. Controlled with arrow keys, you can walk through the flowchart while talking with any audience.
+Walk through your flowchart step by step with arrow keys — great for meetings and demos.
 
-![Presentation Mode will walk you through your flowchart from start to finish.](docs/screenshots/presentation.png)
+![Presentation Mode will walk you through your flowchart from start to finish](docs/screenshots/presentation.png)
 
-## Key features
-
-- **Polished canvas UX**: snap-to-grid, undo/redo, copy/paste, minimap, multi-select
-- **Multiple node and edge types**: editable labels, reconnection, animated styles
-- **Presentation mode**: step through a flowchart to present it cleanly
-- **AI-assisted flowcharts (optional)**: structured JSON outputs + preview before inserting
-- **Local Azure icon library**: 663+ Azure service SVGs bundled in `assets/`
+</details>
 
 ## Quickstart
 
-### Prerequisites
-
-- Node.js 18+
-- pnpm (repo uses `pnpm@10.x`)
-
-### Install
-
 ```bash
+# Prerequisites: Node.js 18+, pnpm 10.x
 pnpm install
+pnpm dev          # http://localhost:3004
+pnpm test         # run tests
+pnpm build        # production build
 ```
 
-### Develop
+## AI Setup (optional)
 
-```bash
-pnpm dev
-```
-
-### Test
-
-```bash
-pnpm test
-```
-
-### Build
-
-```bash
-pnpm build
-pnpm preview
-```
-
-## AI setup (optional)
-
-The AI assistant is powered by **Azure OpenAI** through a serverless proxy (`api/chat.ts`) so credentials stay server-side.
-
-1. Copy `.env.example` to `.env` and fill in values:
+The AI assistant uses **Azure OpenAI** through a serverless proxy (`api/chat.ts`) so credentials stay server-side.
 
 ```bash
 cp .env.example .env
 ```
 
-2. Set these variables (server-side only; do **not** use `VITE_*`):
+Set these variables (server-side only; do **not** use `VITE_*`):
 
-- `AZURE_DEPLOYMENT_NAME`
-- `AZURE_RESOURCE_NAME`
-- `AZURE_API_KEY`
+| Variable                | Description                  |
+| ----------------------- | ---------------------------- |
+| `AZURE_DEPLOYMENT_NAME` | Your Azure OpenAI deployment |
+| `AZURE_RESOURCE_NAME`   | Your Azure resource name     |
+| `AZURE_API_KEY`         | Your Azure API key           |
 
-When deploying to Vercel, add the same environment variables in your Vercel project settings.
+For Vercel, add the same variables in your project settings.
 
-## Architecture (high level)
+<details>
+<summary><strong>Architecture</strong></summary>
 
 ```mermaid
 sequenceDiagram
   participant User
-  participant UI as React_UI
-  participant API as Vercel_Function
-  participant Azure as Azure_OpenAI
-
-  User->>UI: Prompt_generate_or_refine
-  UI->>API: POST_/api/chat_(flowContext_optional)
-  API->>Azure: Chat_completions_(structured_output)
-  Azure-->>API: JSON_flowchart_proposal
-  API-->>UI: message_(JSON_string)_+_finishReason
-  UI-->>User: Preview_then_insert
+  participant UI as React UI
+  participant API as Vercel Function
+  participant Azure as Azure OpenAI
+
+  User->>UI: Prompt (generate or refine)
+  UI->>API: POST /api/chat (flow context optional)
+  API->>Azure: Chat completions (structured output)
+  Azure-->>API: JSON flowchart proposal
+  API-->>UI: Message (JSON string) + finish reason
+  UI-->>User: Preview then insert
 ```
 
-More detail:
-
-- API: `api/README.md`
-- AI prompt “skill”: `api/flowchart-generation-skill.md`
-- Icon resolution: `src/utils/azureIconRegistry.ts`
-
-## Contributing
+- API: [`api/`](api/README.md)
+- AI prompt skill: [`api/flowchart-generation-skill.md`](api/flowchart-generation-skill.md)
+- Icon resolution: [`src/utils/azureIconRegistry.ts`](src/utils/azureIconRegistry.ts)
 
-See `CONTRIBUTING.md`.
+</details>
 
-## Security
+## Tech Stack
 
-See `SECURITY.md`.
+![React](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black)
+![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)
+![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat-square&logo=vite&logoColor=white)
+![Vercel](https://img.shields.io/badge/Vercel-000000?style=flat-square&logo=vercel&logoColor=white)
 
-## Contributions
-
-This app was built 100% with AI assistance using:
-
-- Cursor
-- OpenCode
-- Oh My OpenCode
+## Contributing
 
-This project also inspired me to build [Oh My Cursor](https://github.com/tmcfarlane/oh-my-cursor).
+See [`CONTRIBUTING.md`](CONTRIBUTING.md) and [`SECURITY.md`](SECURITY.md).
 
-Oh My Cursor is a curated set of AI agent configurations for Cursor IDE. One install gives you a team of specialized agents that coordinate autonomously through Cursor's native subagent system.
+## Built With
 
-No CLI wrapper. No external runtime. Just `.cursor/agents/` files and one orchestrator rule that turns Cursor into a multi-agent IDE.
+This app was built 100% with AI assistance using Cursor, OpenCode, and [Oh My Cursor](https://github.com/tmcfarlane/oh-my-cursor).
 
 ## License
 
-MIT. See `LICENSE`.
+MIT. See [`LICENSE`](LICENSE).
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,14 +4,16 @@
   "type": "module",
   "description": "FlowChart Designer - Interactive flow chart builder",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --port 3004",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "vitest"
   },
   "dependencies": {
     "@reactflow/node-resizer": "^2.2.14",
     "@vercel/analytics": "^1.6.1",
+    "gif.js": "^0.2.0",
+    "html-to-image": "^1.11.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "reactflow": "^11.11.4"

diff --git a/public/gif.worker.js b/public/gif.worker.js
diff --git a/src/App.css b/src/App.css
@@ -703,6 +703,16 @@
   color: #4b5563;
 }
 
+.ai-pill-brand-link {
+  color: inherit;
+  text-decoration: none;
+  transition: opacity 0.15s ease;
+}
+
+.ai-pill-brand-link:hover {
+  text-decoration: underline;
+}
+
 /* Dark mode floating pill styles */
 .app.dark-mode .ai-floating-pill {
   background: linear-gradient(135deg, rgba(15, 18, 17, 0.95) 0%, rgba(30, 33, 32, 0.95) 100%);

diff --git a/src/App.tsx b/src/App.tsx
@@ -1060,6 +1060,14 @@ function FlowChartEditor() {
         onSetToolMode={setToolMode}
         darkMode={darkMode}
         onToggleDarkMode={toggleDarkMode}
+        reactFlowWrapper={reactFlowWrapper}
+        nodes={nodes}
+        edges={edges}
+        onImportJson={(importedNodes, importedEdges) => {
+          saveToHistory()
+          setNodes(importedNodes)
+          setEdges(importedEdges)
+        }}
       />
       <div ref={reactFlowWrapper} className="react-flow-wrapper">
         <ReactFlow
@@ -1222,6 +1230,11 @@ function FlowChartEditor() {
           onClose={dismissWelcomeAI}
           variant="welcome"
           onDismiss={dismissWelcomeAI}
+          onImportJson={(importedNodes, importedEdges) => {
+            saveToHistory()
+            setNodes(importedNodes)
+            setEdges(importedEdges)
+          }}
         />
       )}
       {/* Full AI chat overlay (triggered by pill button) */}
@@ -1248,7 +1261,7 @@ function FlowChartEditor() {
       {!isAIBubbleOpen && !(showWelcomeAI && nodes.length === 0 && !aiProposal) && (
         <button className="ai-floating-pill" onClick={toggleAI} aria-label="Open AI Assistant">
           <img src={darkMode ? '/logo/logo_color.svg' : '/logo/logo_dark_pointer.svg'} alt="" className="ai-pill-logo" />
-          <span className="ai-pill-brand">Zero Click Dev</span>
+          <span className="ai-pill-brand">FlowChart</span>
         </button>
       )}
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,3 +26,5 @@ dist-ssr @@
     *.sln
     *.sw?
     .vercel
+    .omc/