Skip to content

Commit 8b97852

Browse files
tmcfarlanetmcfarlane
authored
Merge pull request #5 from tmcfarlane/feature/export-to-gif
Add export to PNG, SVG, and animated GIF
2 parents 61c163d + 88c3d05 commit 8b97852

13 files changed

Lines changed: 908 additions & 116 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,5 @@ dist-ssr
2626
*.sln
2727
*.sw?
2828
.vercel
29+
30+
.omc/

‎README.md‎

Lines changed: 89 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,160 +1,147 @@
1-
<p align="center">
2-
<a href="https://github.com/tmcfarlane/flowchart">
3-
<img src="docs/screenshots/flow.gif" alt="FlowChart demo" width="500" />
1+
<div align="center">
2+
3+
<p>
4+
<a href="https://flowchart.zeroclickdev.ai/">
5+
<img src="docs/screenshots/flow.gif" alt="FlowChart AI — Free AI-powered flowchart designer" width="560" />
46
</a>
57
</p>
68

7-
<p align="center"><strong>FlowChart</strong> by <strong>ZeroClickDev</strong></p>
8-
<p align="center">A modern flowchart designer with optional AI-assisted generation.</p>
9+
<div style="font-size: 2.5em; font-weight: 800; letter-spacing: 0.08em; line-height: 1.1;">
10+
<strong>FLOWCHART AI</strong>
11+
</div>
912

10-
<p align="center">
11-
<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>
12-
<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>
13-
<a href="https://github.com/tmcfarlane/flowchart/issues"><img alt="Issues" src="https://img.shields.io/github/issues/tmcfarlane/flowchart?style=flat-square" /></a>
14-
</p>
13+
<div style="font-size: 1.1em; margin: 8px 0;">
14+
<strong>Describe your idea. Get a flowchart.</strong>
15+
</div>
1516

16-
<p align="center">
17-
<a href="https://flowchart.zeroclickdev.ai/">Live demo</a> |
18-
<a href="/api">API</a> |
19-
<a href="/src">UI</a>
20-
</p>
17+
The open-source flowchart designer that turns plain-English prompts into polished diagrams in seconds.<br>
18+
AI generation &nbsp;|&nbsp; 663+ Azure icons &nbsp;|&nbsp; Presentation mode &nbsp;|&nbsp; Export to PNG, SVG & GIF
19+
20+
<br>
21+
22+
[![Try it Live](https://img.shields.io/badge/Try_it_Live-00c896?style=for-the-badge&logo=vercel&logoColor=white)](https://flowchart.zeroclickdev.ai/)
23+
24+
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
25+
[![GitHub Stars](https://img.shields.io/github/stars/tmcfarlane/flowchart)](https://github.com/tmcfarlane/flowchart/stargazers)
26+
[![Issues](https://img.shields.io/github/issues/tmcfarlane/flowchart)](https://github.com/tmcfarlane/flowchart/issues)
27+
[![Free](https://img.shields.io/badge/Price-Free-brightgreen)](https://flowchart.zeroclickdev.ai/)
28+
<br>
29+
30+
Created by <a href="https://zeroclickdev.ai/">ZeroClickDev</a>
31+
32+
</div>
2133

2234
---
2335

24-
## What is this?
36+
## Features
2537

26-
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.
27-
It’s styled to match the ZeroClickDev design system (dark-first charcoal UI with teal/cyan accents).
38+
- **AI-powered generation** — describe what you want in plain English, get a structured flowchart in seconds
39+
- **Free to use** — no sign-up, no paywall, no limits on the canvas
40+
- **Export to PNG, SVG & animated GIF** — share diagrams in docs, slides, or README files
41+
- **Presentation mode** — step through your flowchart with arrow keys, perfect for walkthroughs
42+
- **663+ Azure icons** — official [Azure icon library](https://learn.microsoft.com/en-us/azure/architecture/icons/) built in, auto-applied by AI
43+
- **Dark mode** — charcoal UI with teal/cyan accents, toggleable in one click
44+
- **Polished canvas UX** — snap-to-grid, undo/redo, copy/paste, minimap, multi-select
45+
- **Multiple node & edge types** — step, decision, note, image nodes with editable labels and animated edges
46+
- **AI proposal preview** — review, regenerate, and tweak AI suggestions before inserting
47+
- **Deploy anywhere** — one-click Vercel deploy, serverless API keeps credentials safe
2848

29-
## Screenshots
49+
<details>
50+
<summary><strong>Screenshots</strong></summary>
3051

31-
### ZeroClickDev “vibes”
52+
### AI Generation
3253

3354
Tell Flowchart what you want to make and watch it magically jump start you.
3455

3556
![Tell Flowchart what you want to make and watch it magically jump start you](docs/screenshots/vibes.png)
3657

37-
### Azure icons
58+
### Azure Icons
3859

39-
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.
60+
Official Azure icons are automatically applied to AI-generated nodes.
4061

41-
![Default support for official Azure icons library. AI generated nodes will also include Azure Icons if applicable.](docs/screenshots/azureicons.png)
62+
![Default support for official Azure icons library](docs/screenshots/azureicons.png)
4263

43-
### AI proposal preview
64+
### AI Proposal Preview
4465

45-
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.
66+
Review, regenerate, and modify AI suggestions before adding them to the canvas.
4667

47-
![AI proposal view to review, regenerate, and modify prior to adding your new flowchart to the canvas.](docs/screenshots/ai-proposal.png)
68+
![AI proposal view to review, regenerate, and modify prior to adding your new flowchart to the canvas](docs/screenshots/ai-proposal.png)
4869

4970
### Presentation Mode
5071

51-
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.
72+
Walk through your flowchart step by step with arrow keys — great for meetings and demos.
5273

53-
![Presentation Mode will walk you through your flowchart from start to finish.](docs/screenshots/presentation.png)
74+
![Presentation Mode will walk you through your flowchart from start to finish](docs/screenshots/presentation.png)
5475

55-
## Key features
56-
57-
- **Polished canvas UX**: snap-to-grid, undo/redo, copy/paste, minimap, multi-select
58-
- **Multiple node and edge types**: editable labels, reconnection, animated styles
59-
- **Presentation mode**: step through a flowchart to present it cleanly
60-
- **AI-assisted flowcharts (optional)**: structured JSON outputs + preview before inserting
61-
- **Local Azure icon library**: 663+ Azure service SVGs bundled in `assets/`
76+
</details>
6277

6378
## Quickstart
6479

65-
### Prerequisites
66-
67-
- Node.js 18+
68-
- pnpm (repo uses `[email protected]`)
69-
70-
### Install
71-
7280
```bash
81+
# Prerequisites: Node.js 18+, pnpm 10.x
7382
pnpm install
83+
pnpm dev # http://localhost:3004
84+
pnpm test # run tests
85+
pnpm build # production build
7486
```
7587

76-
### Develop
88+
## AI Setup (optional)
7789

78-
```bash
79-
pnpm dev
80-
```
81-
82-
### Test
83-
84-
```bash
85-
pnpm test
86-
```
87-
88-
### Build
89-
90-
```bash
91-
pnpm build
92-
pnpm preview
93-
```
94-
95-
## AI setup (optional)
96-
97-
The AI assistant is powered by **Azure OpenAI** through a serverless proxy (`api/chat.ts`) so credentials stay server-side.
98-
99-
1. Copy `.env.example` to `.env` and fill in values:
90+
The AI assistant uses **Azure OpenAI** through a serverless proxy (`api/chat.ts`) so credentials stay server-side.
10091

10192
```bash
10293
cp .env.example .env
10394
```
10495

105-
2. Set these variables (server-side only; do **not** use `VITE_*`):
96+
Set these variables (server-side only; do **not** use `VITE_*`):
10697

107-
- `AZURE_DEPLOYMENT_NAME`
108-
- `AZURE_RESOURCE_NAME`
109-
- `AZURE_API_KEY`
98+
| Variable | Description |
99+
| ----------------------- | ---------------------------- |
100+
| `AZURE_DEPLOYMENT_NAME` | Your Azure OpenAI deployment |
101+
| `AZURE_RESOURCE_NAME` | Your Azure resource name |
102+
| `AZURE_API_KEY` | Your Azure API key |
110103

111-
When deploying to Vercel, add the same environment variables in your Vercel project settings.
104+
For Vercel, add the same variables in your project settings.
112105

113-
## Architecture (high level)
106+
<details>
107+
<summary><strong>Architecture</strong></summary>
114108

115109
```mermaid
116110
sequenceDiagram
117111
participant User
118-
participant UI as React_UI
119-
participant API as Vercel_Function
120-
participant Azure as Azure_OpenAI
121-
122-
User->>UI: Prompt_generate_or_refine
123-
UI->>API: POST_/api/chat_(flowContext_optional)
124-
API->>Azure: Chat_completions_(structured_output)
125-
Azure-->>API: JSON_flowchart_proposal
126-
API-->>UI: message_(JSON_string)_+_finishReason
127-
UI-->>User: Preview_then_insert
112+
participant UI as React UI
113+
participant API as Vercel Function
114+
participant Azure as Azure OpenAI
115+
116+
User->>UI: Prompt (generate or refine)
117+
UI->>API: POST /api/chat (flow context optional)
118+
API->>Azure: Chat completions (structured output)
119+
Azure-->>API: JSON flowchart proposal
120+
API-->>UI: Message (JSON string) + finish reason
121+
UI-->>User: Preview then insert
128122
```
129123

130-
More detail:
131-
132-
- API: `api/README.md`
133-
- AI prompt “skill”: `api/flowchart-generation-skill.md`
134-
- Icon resolution: `src/utils/azureIconRegistry.ts`
135-
136-
## Contributing
124+
- API: [`api/`](api/README.md)
125+
- AI prompt skill: [`api/flowchart-generation-skill.md`](api/flowchart-generation-skill.md)
126+
- Icon resolution: [`src/utils/azureIconRegistry.ts`](src/utils/azureIconRegistry.ts)
137127

138-
See `CONTRIBUTING.md`.
128+
</details>
139129

140-
## Security
130+
## Tech Stack
141131

142-
See `SECURITY.md`.
132+
![React](https://img.shields.io/badge/React-61DAFB?style=flat-square&logo=react&logoColor=black)
133+
![TypeScript](https://img.shields.io/badge/TypeScript-3178C6?style=flat-square&logo=typescript&logoColor=white)
134+
![Vite](https://img.shields.io/badge/Vite-646CFF?style=flat-square&logo=vite&logoColor=white)
135+
![Vercel](https://img.shields.io/badge/Vercel-000000?style=flat-square&logo=vercel&logoColor=white)
143136

144-
## Contributions
145-
146-
This app was built 100% with AI assistance using:
147-
148-
- Cursor
149-
- OpenCode
150-
- Oh My OpenCode
137+
## Contributing
151138

152-
This project also inspired me to build [Oh My Cursor](https://github.com/tmcfarlane/oh-my-cursor).
139+
See [`CONTRIBUTING.md`](CONTRIBUTING.md) and [`SECURITY.md`](SECURITY.md).
153140

154-
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.
141+
## Built With
155142

156-
No CLI wrapper. No external runtime. Just `.cursor/agents/` files and one orchestrator rule that turns Cursor into a multi-agent IDE.
143+
This app was built 100% with AI assistance using Cursor, OpenCode, and [Oh My Cursor](https://github.com/tmcfarlane/oh-my-cursor).
157144

158145
## License
159146

160-
MIT. See `LICENSE`.
147+
MIT. See [`LICENSE`](LICENSE).

‎package-lock.json‎

Lines changed: 14 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@
44
"type": "module",
55
"description": "FlowChart Designer - Interactive flow chart builder",
66
"scripts": {
7-
"dev": "vite",
7+
"dev": "vite --port 3004",
88
"build": "tsc && vite build",
99
"preview": "vite preview",
1010
"test": "vitest"
1111
},
1212
"dependencies": {
1313
"@reactflow/node-resizer": "^2.2.14",
1414
"@vercel/analytics": "^1.6.1",
15+
"gif.js": "^0.2.0",
16+
"html-to-image": "^1.11.13",
1517
"react": "^18.3.1",
1618
"react-dom": "^18.3.1",
1719
"reactflow": "^11.11.4"

‎public/gif.worker.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -703,6 +703,16 @@
703703
color: #4b5563;
704704
}
705705

706+
.ai-pill-brand-link {
707+
color: inherit;
708+
text-decoration: none;
709+
transition: opacity 0.15s ease;
710+
}
711+
712+
.ai-pill-brand-link:hover {
713+
text-decoration: underline;
714+
}
715+
706716
/* Dark mode floating pill styles */
707717
.app.dark-mode .ai-floating-pill {
708718
background: linear-gradient(135deg, rgba(15, 18, 17, 0.95) 0%, rgba(30, 33, 32, 0.95) 100%);

‎src/App.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1060,6 +1060,14 @@ function FlowChartEditor() {
10601060
onSetToolMode={setToolMode}
10611061
darkMode={darkMode}
10621062
onToggleDarkMode={toggleDarkMode}
1063+
reactFlowWrapper={reactFlowWrapper}
1064+
nodes={nodes}
1065+
edges={edges}
1066+
onImportJson={(importedNodes, importedEdges) => {
1067+
saveToHistory()
1068+
setNodes(importedNodes)
1069+
setEdges(importedEdges)
1070+
}}
10631071
/>
10641072
<div ref={reactFlowWrapper} className="react-flow-wrapper">
10651073
<ReactFlow
@@ -1222,6 +1230,11 @@ function FlowChartEditor() {
12221230
onClose={dismissWelcomeAI}
12231231
variant="welcome"
12241232
onDismiss={dismissWelcomeAI}
1233+
onImportJson={(importedNodes, importedEdges) => {
1234+
saveToHistory()
1235+
setNodes(importedNodes)
1236+
setEdges(importedEdges)
1237+
}}
12251238
/>
12261239
)}
12271240
{/* Full AI chat overlay (triggered by pill button) */}
@@ -1248,7 +1261,7 @@ function FlowChartEditor() {
12481261
{!isAIBubbleOpen && !(showWelcomeAI && nodes.length === 0 && !aiProposal) && (
12491262
<button className="ai-floating-pill" onClick={toggleAI} aria-label="Open AI Assistant">
12501263
<img src={darkMode ? '/logo/logo_color.svg' : '/logo/logo_dark_pointer.svg'} alt="" className="ai-pill-logo" />
1251-
<span className="ai-pill-brand">Zero Click Dev</span>
1264+
<span className="ai-pill-brand">FlowChart</span>
12521265
</button>
12531266
)}
12541267
</div>

0 commit comments

Comments
 (0)