Electron + React 19 + TypeScript

Desktop apps deserve modern tooling. React 19's improved rendering handles real-time Mermaid preview without flicker. TypeScript catches errors before runtime. Electron provides cross-platform distribution with native OS integrations.

Electron Forge + Vite

Vite's lightning-fast HMR makes development enjoyable—changes appear instantly. Electron Forge handles the complexity of building, packaging, and distributing desktop apps. Three Vite configs manage main process, renderer process, and preload script compilation.

Mermaid.js for Rendering

Mermaid is the gold standard for code-based diagrams. It supports flowcharts, sequence diagrams, class diagrams, state machines, ER diagrams, Gantt charts, pie charts, and mind maps. The rendering engine is battle-tested across millions of GitHub READMEs.

OpenAI SDK (GPT-5)

AI generation uses OpenAI's GPT-5 model with intelligent prompt engineering. The service handles model differences—GPT-5 uses max_completion_tokens instead of max_tokens and doesn't support temperature parameter. These nuances are abstracted away.

shadcn/ui + Tailwind CSS

Beautiful, accessible components without the framework lock-in. shadcn/ui provides the building blocks (dialogs, buttons, inputs, scroll areas), Tailwind handles styling. The result: a native-feeling app with minimal custom CSS.

AI-Powered Generation

Describe what you need in natural language. The AI understands context:

• Create new diagrams: "Create a flowchart for user authentication with email and OAuth"
• Modify existing diagrams: "Add error handling to the payment process"
• Convert between types: "Convert this flowchart to a sequence diagram"
• Add elements: "Add a decision node after the validation step"

8 Diagram Types Supported

Export Options

Export diagrams as SVG (scalable for any size) or PNG (universal compatibility). The print-friendly theme uses neutral colors optimized for both screen and paper—no more unreadable diagrams in printed docs.

Print-Ready Theme

Custom Mermaid theme with carefully chosen colors: slate tones for borders, soft backgrounds, high-contrast text. Diagrams look professional in presentations, documentation, and printed materials without manual styling.

1. Real-Time Rendering Without Flicker

Mermaid.js re-renders the entire SVG on every change. Naive implementation causes visible flicker during typing. Solution: debounced rendering with minimum 300ms delay, plus React's batched state updates to minimize reflows.

2. GPT-5 API Differences

OpenAI's GPT-5 uses different parameters than GPT-4. The OpenAIService detects model variants and adjusts—max_completion_tokens instead of max_tokens, no temperature parameter. Users can switch models without breaking generation.

3. Prompt Engineering for Diagram Quality

Getting AI to output clean Mermaid syntax required iteration. The system prompt specifies all supported diagram types, explains syntax rules, and enforces "output only the diagram code" behavior. Markdown code blocks are stripped automatically if the model includes them.

4. Resizable Panel Layout

The three-panel layout (sidebar, editor, preview) needed to be resizable with persisted widths. Custom drag handlers track mouse position, calculate percentages, and store preferences in localStorage. Panel widths survive app restarts.

1. Desktop Apps Are Not Dead

Local-first applications have real advantages: no accounts, no latency, no privacy concerns, works offline. For productivity tools that handle sensitive data, desktop distribution makes sense.

2. AI as Collaborator, Not Replacement

The AI generates initial diagrams, but users still review and refine. The tool amplifies human capability rather than replacing it. This balance keeps users in control while eliminating tedious syntax lookup.

3. Security Must Be Built In

Using Electron's safeStorage from day one meant zero security debt. Retrofitting credential encryption is harder than doing it right initially.

4. Simple Tools Can Be Powerful

MarkdownFlows does one thing well: AI-powered Mermaid diagrams. No feature bloat, no unnecessary complexity. Focused tools that solve specific problems are often more valuable than Swiss Army knife applications.