FlowCraft Release Notes

Version 6.2.1 — Finalize & View no longer fails with "Render failed"

If you drafted a diagram, clicked Finalize & View, and landed on a "Render failed — Unable to render diagram, the generated mermaid syntax was invalid" panel (with Could not find a suitable point for the given distance in the console), this is the fix. The Mermaid source was always valid — a global CSS rule was hiding the temp DOM node Mermaid uses to measure text, so every node came out with zero width.

🐛 The page's own CSS was nuking measurement

• A "safety net" rule in styles/tailwind.css (body > [id^="dmermaid-"], body > [id^="dtpl-"] { display: none !important; }) was meant to clean up failed-render stragglers, but it also matched the in-progress render's temp container. Mermaid measures node text via getComputedTextLength() and getBBox() on an SVG inside that container; with display: none, both return 0. Dagre then laid out nodes on top of each other, edges collapsed to polylines shorter than the label distance, and calculatePoint threw "Could not find a suitable point for the given distance".
• The workbench preview wasn't hit because it uses temp-IDs starting with dmmd-, which the selector didn't match. Only the finalized viewer (dmermaid-*) and template viewer (dtpl-*) were affected.
• The rule has been removed. Mermaid's own removeExistingElements clears prior temp nodes at the start of every render, and our finally block removes the temp node on every code-path — the safety net wasn't pulling its weight.

🛡️ Belt-and-braces in the shared client

• The shared mermaid client (lib/mermaidClient.ts) now also awaits document.fonts.ready before the first init and before each render. This isn't what caused this bug, but it forecloses a separate font-load race that would have surfaced eventually.

🩺 Better diagnostics next time

• If a render still fails, the console now logs the failing message, code length and preview, and document.fonts.status alongside the error so we can tell at a glance whether fonts were ready or whether the source itself was the problem.

Version 6.2.0 — Dashboard splits finalized diagrams from in-progress drafts

Your dashboard now separates shipped work from work-in-progress so you can see what's done at a glance.

✨ Two distinct sections: Finalized and In draft

• The dashboard home now shows two separate sections in the main column: Finalized (opens the read-only viewer) and In draft (opens the workbench to keep editing).
• Each section shows your four most recent entries with an "All finalized" / "All drafts" link into the full diagrams list.
• Finalized cards carry a ◆ Finalized badge so the status is obvious without hovering.
• The stats strip replaces the old "Flow diagrams" tile with a live Finalized count alongside In draft, Active shares, and your remaining quota.

Version 6.1.5 — Template flowcharts no longer fail with a dagre layout error

If you opened /templates/flowchart/[id] and saw "Could not find a suitable point for the given distance" where the diagram should be, this is the fix.

🐛 Dropped the fontFamily: 'inherit' override in the template Mermaid viewer

• 'inherit' isn't a real font name, so when dagre tried to measure label widths before a resolvable font was ready, edge routing failed and threw "Could not find a suitable point for the given distance" instead of rendering.
• The template viewer now lets Mermaid fall back to its default font (which measures reliably) and hoists initialization into an ensureMermaidInitialized() singleton, matching the pattern the drafting-studio preview already uses.

Version 6.1.4 — Finalized diagrams no longer render as a blank white card

If you clicked into a finalized diagram and saw an empty white sheet with nothing drawn inside, this is the fix.

🐛 Legacy finalized rows now surface an actionable error instead of a blank canvas

• The viewer's sanitizeMermaid call can return an empty string for diagrams finalized before the sanitize-on-finalize fix in 6.1.3 (stored content was missing a recognizable Mermaid header). An empty string bypassed both the Mermaid render path and the error UI — so you got a silent white box with no console output.
• The viewer now falls back to the raw stored content when sanitize comes back empty. Mermaid fails loudly, the existing error panel renders with "Show raw source" and a "Re-open in workbench" link so you can heal the draft in one click.
• Drafts that simply had an unusual preamble Mermaid itself accepts will now render correctly, since we stopped discarding them pre-parse.

Version 6.1.3 — Fix "invalid syntax" on freshly drafted diagrams

A generation-pipeline fix for anyone who saw their new draft render as "· invalid syntax" even though the Mermaid code looked valid.

🐛 Envelope parsing now survives nested fences and multi-line strings

• The backend validator that extracts { title, code } from the model's response was choking on two things: a non-greedy fence regex that stopped at the first inner ``` (the opening of the nested mermaid block), and strict JSON rejecting the literal newlines LLMs embed in multi-line code. When both failed, the raw JSON envelope was being saved to the database and streamed into the editor — hence the wrapper showing up in the Mermaid pane.
• The validator now greedily matches the outer fence, parses with strict=False so embedded newlines are accepted, and strips any residual ```mermaid … ``` wrapper from the code field before saving.
• Chat iteration on existing diagrams uses the same validator, so follow-up edits are covered too.

♻️ Legacy rows heal on reopen

If you had a draft saved with the broken wrapper, reopening it now unwraps the envelope on the fly via a hardened sanitizeMermaid. Editing or finalizing writes the cleaned Mermaid back to your diagram — no manual recovery needed.

Version 6.1.2 — Templates match the drafting studio

The Templates gallery now speaks the same visual language as the rest of FlowCraft.

🎨 Editorial redesign for template pages

• Individual template pages (e.g. /templates/flowchart/microservices-architecture) now use the drafting-studio aesthetic: serif display headlines with signal-lime italics, monospaced kickers, corner ticks around the specimen, dot-grid backdrop, and a title-block / status strip beneath the diagram.
• Type listing pages (/templates/[type]) and topic cross-reference pages (/templates/topic/[topic]) were still rendering in the old light-mode slate/white palette — they've been rebuilt on ink/paper with Fig. captions and hover-to-graphite cards.
• Templates layout background switched from graphite to ink so the whole tree matches the landing page.

No functional changes — just visual consistency.

Version 6.1.1 — Template handoff fixes

A handful of fixes for people using the Templates gallery.

🔧 "Use this template" now works end-to-end

• Clicking Use this template after signing in (or signing up) now lands you in the editor instead of a 404 — the post-auth redirect was pointing at /dashboard/diagrams/:id but the real route is /dashboard/diagram/:id. Fixed in the template action, email/OAuth confirm callback, and the login form.
• If you were already signed in on app.flowcraft.app but clicked into a template from the root domain, the template page saw you as logged-out and bounced you to sign-up. Supabase auth cookies are now scoped to the parent domain, so your session is shared across flowcraft.app and app.flowcraft.app.

Existing users may need to sign in once more after this rolls out so the new parent-domain cookie gets written.

Version 6.1.0 — Retry on render failure

Small but practical addition for anyone who's run into Unable to render diagram. in the viewer.

🔁 Retry with original prompt

When Mermaid can't parse a generated diagram, the viewer now shows an inline "Retry with original prompt" button instead of a dead-end message.

• Hits a new /api/regenerate-diagram endpoint that re-runs generation with the diagram's original title, description, and type
• Updates the diagram in place — no new row created, no lost link
• Only available to the diagram owner; public share viewers are unaffected
• Works for all mermaid-based diagram types (flow charts, sequence, class, ER, state, gitgraph, etc.)

No more reloading the page, regenerating from scratch, or digging through the console.

Version 6.0.0 — The Drafting Studio

Hello FlowCrafters!

This is our biggest update yet. Over the last several weeks we rebuilt FlowCraft around a new editorial "drafting studio" aesthetic — grid paper, monospaced tickers, signal-lime accents — and shipped an entire templates library, a rewritten pricing stack, and a long-awaited Light Mode. Here's everything that landed.

✨ Light Mode is here

You can now flip the entire app between light and dark from the new toggle in the navbar. Your preference is saved across sessions, and every surface — landing page, dashboard, diagram viewer, templates, blogs, release notes — respects it.

• Dark remains the default to preserve the signature drafting-studio look
• Tokens live as CSS variables so the app stays consistent across routes
• Toggle available on desktop (navbar) and in the mobile menu

🎨 The "Drafting Studio" redesign

We rewrote the visual language across the product: editorial serifs, monospace tickers, dotted grid sheets, corner ticks, and a single signal-lime accent.

• Landing, dashboard, pricing, FAQ, nav, and New Draft flow all redesigned end-to-end
• Diagram viewer restyled as a proper rendered "sheet" with zoom/pan toolbar
• Gallery rebuilt into a curated showcase with the same aesthetic
• Blogs, release notes, and support pages brought into the system
• Auth form, loading skeletons, and overlay retooled to match
• Templates pages now use the shared navbar and palette and preserve your intended template when you log in mid-flow

📚 Templates Library

A brand-new way to start: pre-made, SEO-rich diagram templates you can clone into your account in one click.

• 14 diagram types and 30 curated topics (user auth, OAuth 2, CI/CD, ER modeling, state machines, and many more)
• Per-type hub pages, cross-type topic pages, and a Gallery hub with filters and search
• Detail pages with full SEO and cross-links between related templates
• Clone-to-user: pick a template, land it in your dashboard as a fresh diagram (works through signup too)
• OG images generated per template, templates included in the sitemap
• Thumbnails served through an API route to keep pages fast

💳 Rewritten Pricing

• /pricing is now a Server Component with 1-hour ISR and pulls tiers directly from Stripe — no more drift between what's in the code and what's in your bill
• Auth-aware CTAs: the button says the right thing whether you're signed out, on Free, or already a subscriber
• Loading state and strict Stripe pricing fixes

🛠️ /tools SEO landing pages

We added 61 dedicated /tools/[slug] pages (e.g. AI Class Diagram Generator, AI ER Diagram Maker, AI Sequence Diagram Generator) with pre-rendered SVG examples — so folks searching for a specific diagram generator can land directly on the right page.

🐛 Bug fixes

• Session loss on refresh — moved Supabase SSR to the getAll/setAll cookie adapter (@supabase/ssr 0.5.2) so you no longer get silently signed out after a page reload. Also relocated the middleware so session refresh actually runs.
• Stray "Unable to render diagram" overlay — when Mermaid couldn't parse a diagram, a leftover render node was sometimes left attached to the page, blocking content on the side. Rendering now preflights the syntax, always cleans up its temporary nodes, and a global safeguard hides any straggler.
• Paste-mode classifier lock — the paste flow no longer gets stuck on the AI-suggested diagram type once you override it.
• Gitgraph diagrams — aligned the type name with the API so generation works reliably again.
• Self-heal subscription lookup — subscription state now recovers automatically from transient inconsistencies instead of showing the wrong tier.

We poured a lot into this release. Give Light Mode a try, browse the new Templates library, and let us know what you think.

Happy drafting,

The FlowCraft Team

Version 5.0.0 - Redesigned Diagram Creation Experience

Hello FlowCrafters!

We're excited to introduce a fresh new look and enhanced features to FlowCraft! Here's what's new in this update:

• Redesigned Diagram Creation Experience: We've revamped the diagram creation process to make it more intuitive and user-friendly. The new design provides a seamless flow from selecting a diagram type to customizing and editing your diagram.

• Enhanced Diagram creation: We've updated our diagram creation process AI to provide more accurate and relevant diagrams based on your input. The AI now offers better diagram creations for a wide range of use cases.

• Improved User Interface: We've made several enhancements to the user interface to improve the overall user experience. The updated design is more visually appealing and easier to navigate.

We hope you enjoy the new and improved FlowCraft experience! As always, we're here to help if you have any questions or feedback.

Happy diagramming!

Version 4.4.0 - Copy Diagrams and Bug Fixes

Hello FlowCrafters!

I just introduced a highly requested feature and addressed some pesky bugs. Here's what's new:

• Copy Diagrams: You can now copy your diagrams to the clipboard with a single click! This feature makes it easy to duplicate diagrams and share them across different platforms.

• Bug Fixes: We've squashed some bugs to ensure a smoother experience for you. Previously, when you tried to view an existing diagram, the diagram would not load correctly. This issue has been fixed, and you can now view your diagrams without any problems. If you encounter any other issues, please let us know!

I hope you enjoy the new copy feature and the bug fixes. As always, I'm here to help if you have any questions or feedback.

Happy diagramming!

Version 4.3.0

Hello FlowCrafters!

Quick update for you all. We've made some minor improvements to the app to enhance your overall experience. Here's what's new:

• Improved Performance: We've optimized the app to make it faster and more responsive, so you can create diagrams more efficiently.
• Ability to Delete Edges: You will now see a red Trash icon over the edges in your Flow Diagrams. Clicking on this icon will delete the edge, allowing you to refine your diagrams with ease.
• Improved Flow Diagram Styling: We've enhanced the styling of the Flow Diagrams to make them more visually appealing and easier to read.

We hope these updates make your diagramming experience even better! As always, we're here to help if you have any questions or feedback.

Happy diagramming!

The FlowCraft Team

Version 4.2.0

Due to the high number of diagrams being generated, I wanted to make sure your experience is as smooth as possible.

Since I can't talk to each of you individually, I've added a Feedback button to the app. If you have any suggestions, feedback, or just want to say hi, feel free to click on the button and send me a message. I'd love to hear from you!

Also, when you first log in, you will see the Feedback form pop up to make it easier for you to reach out to me. I'm always here to help and make your experience better.

Happy diagramming!

The FlowCraft Team

Version VS Code Extension!

We're thrilled to announce the release of FlowCraft Vs Code Extension, bringing the power of visual code flowcharts directly to your development environment!

Introducing the FlowCraft VS Code Extension:

I personally wanted to create this extension to help developers visualize their code and improve their understanding of complex logic. I hope you find it useful and enjoy using it as much as I enjoyed creating it!

Key Features:

• Seamless VS Code Integration: Generate flow diagrams directly from your code editor, eliminating context switching and boosting productivity.
• Effortless Code Conversion: Select your code and instantly visualize its flow with a single click.
• Enhanced Code Understanding: Gain a clear visual representation of code logic, making complex structures easier to grasp.
• Improved Communication: Flowcharts facilitate clear communication of code flow between developers and stakeholders.

Getting Started with FlowCraft VS Code Extension:

1. Visit the VS Code marketplace and search for "FlowCraft" or click here.
2. Install the FlowCraft extension.
3. Highlight your code (block or entire file).
4. Open the command palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) and search for FlowCraft:

We'd love to hear your feedback! Share your thoughts, suggestions, or feature requests. Please feel free to reach out to us at X or open up an issue on our GitHub repository

Don't forget to follow us on X for the latest updates and announcements!

Happy Flowcharting!

The FlowCraft Team

Version 4.1.0

Minor Updates and Improvements

• Enhanced User Experience: We've made several improvements to the user interface to enhance your overall experience with FlowCraft.
• Bug Fixes: We've addressed various bugs and issues to Sharing and Exporting diagrams to ensure a smooth experience.
• Performance Optimizations: We've optimized the performance of the application to make it faster and more responsive.

Introducing FlowCraft Hobby and Pro: Unlock Premium Features for Enhanced Diagramming!

Hey FlowCrafters! The FlowCraft team is excited to announce the launch of two new plans: FlowCraft Hobby and FlowCraft Pro! These plans are designed to provide you with access to premium features that will take your diagramming experience to the next level.

FlowCraft Hobby

FlowCraft Hobby is perfect for individuals who want to create stunning diagrams for personal projects, hobbies, or small-scale work. With FlowCraft Hobby, you can:

• Create up to 20 diagrams per month
• Access all diagram types, including the latest AI-powered diagrams such as Sequence Diagrams, Class Diagrams, and more
• Enjoy the ability to export and share your diagrams
• Benefit from customer support to help you with any questions or issues

FlowCraft Pro

FlowCraft Pro is ideal for professionals, teams, and businesses looking to supercharge their diagramming capabilities. With FlowCraft Pro, you can:

• Create an unlimited number of diagrams, no matter the type or complexity
• Get early access to all new features and updates
• Collaborate with team members in real-time on diagrams (coming soon!)
• Enjoy Priority Support to address any questions or concerns promptly

Upgrade to FlowCraft Hobby or Pro Today!

Once you pass 5 diagram creations, you will be prompted to choose a plan that best suits your needs. Whether you're a hobbyist, a professional, or part of a team, FlowCraft has a plan for you!

We're excited to see how you'll use FlowCraft Hobby and Pro to create amazing diagrams and visuals. If you have any feedback or suggestions, please don't hesitate to reach out to us. Happy diagramming!

The FlowCraft Team

Version 4.0.0

Supercharged Diagramming Gets Even More Super!

Hey FlowCrafters! The FlowCraft team here, bursting with excitement to unveil some epic upgrades that will take your diagramming game to the next level!

Feeling the 20-diagram limit pinch? Say no more! We've heard your cries (and frantic mouse clicks) and implemented the ability to upgrade your plan and unleash your inner diagramming beast! With an upgraded plan, you can create an unlimited number of stunning AI-powered diagrams, whiteboards, and complex masterpieces.

But wait, there's more! Upgrading your plan grants you early access to all our shiny new features before anyone else. Be the trendsetter, the envy of your colleagues, the diagramming guru with the coolest tools!

Speaking of cool tools, keep your eyes peeled because team collaboration is just around the corner! Imagine brainstorming and editing diagrams together in real-time – pure diagramming bliss! ✨ And that's not all – we've got a whole pipeline of awesome upgrades brewing in our secret (not really that secret) developer lair.

Ready to unlock the full potential of FlowCraft? Head over to your account and explore our upgrade options! It's time to unleash your creativity and conquer the world (or at least that next big project) with the power of FlowCraft!

P.S. We love hearing your feedback! Drop us a line and let us know what features you'd love to see next. We're always looking for ways to make FlowCraft even more amazing.

Happy Diagramming!

The FlowCraft Team

Version 3.5.0

We're thrilled to announce a significant update to FlowCraft, empowering you to create an even wider range of visuals with the help of artificial intelligence!

New Diagram Types:

Get ready to explore a whole new world of visual communication possibilities! FlowCraft's AI can now generate the following diagrams based on your title and description:

• Sequence Diagrams: Visualize the interactions between objects in a system.
• Class Diagrams: Model object-oriented systems with clarity.
• State Diagrams: Depict the different states a system can be in and how it transitions between them.
• Entity Relationship Diagrams: Illustrate the relationships between entities in a database.
• User Journey Maps: Craft compelling user experiences by visualizing user interactions with your product or service.
• Gantt Charts: Manage projects effectively with clear timelines.
• Pie Charts & Quadrant Charts: Represent data in an easily digestible format.
• Requirement Diagrams: Capture functional and non-functional requirements for software development.
• Mindmaps: Brainstorm and organize ideas visually.
• Timelines: Create clear timelines for projects, events, or historical events.
• Zenuml Diagrams: Model data flows and transformations with a focus on data quality.
• Sankey Diagrams: Visualize complex relationships between flows or stocks.

This expanded library caters to a wider range of communication needs, allowing you to transform your ideas into clear and impactful visuals. As these are newly released, please keep in mind that this new feature is still in experimental stage.

If you would like to submit any feedback, please reach out to us!

Pro Tip: Enhance AI Accuracy with Title Prefixes!

FlowCraft's AI is constantly learning and improving. To ensure it generates the most accurate diagram for your needs, consider adding prefixes to your diagram titles. For example, a title like "User Journey: Mobile App Onboarding" will guide the AI towards creating a user journey map specifically tailored to the mobile app onboarding process.

We encourage you to explore the new diagram types and discover how FlowCraft can streamline your visual communication workflow!

Happy Diagramming!

The FlowCraft Team

Version 3.0.0

We're thrilled to unveil a fresh look and feel for FlowCraft! Get ready to experience a completely redesigned landing page and an enhanced dashboard with a convenient Recent list.

Enhanced Dashboard with Recent List:

• Stay Organized: The all-new Recent list displays your most recently created diagrams right on your dashboard. Quickly access and continue working on your latest projects without having to search.
• Improved Workflow: This addition streamlines your workflow by keeping your most relevant diagrams readily available.

Introducing a Brand New Landing Page:

• Modern Design: We've given FlowCraft a sleek and modern makeover, making your first impression even better.
• Clearer Value Proposition: The landing page now showcases the power of FlowCraft in a clear and concise way, highlighting its benefits for creating and communicating your ideas visually.

We believe these changes will significantly enhance your FlowCraft experience, making it easier and more enjoyable to create stunning and effective flow diagrams.

We encourage you to explore the new design and provide your feedback!

Happy FlowCharting!

The FlowCraft Team

Version 2.0.0

We're excited to announce the latest update to FlowCraft, bringing you a fresh design, enhanced editing capabilities, and a convenient sharing feature!

New Features:

• Revamped Flow Diagrams: We've given your flow diagrams a sleek and modern redesign, making them even more visually appealing and professional.
• Effortless Editing: Editing your diagrams is now smoother than ever. Enjoy an intuitive editing experience that streamlines the process of creating and refining your visuals.
• Shareable Links: Collaborate with ease! The new share feature allows you to create a unique link to your diagram, enabling you to easily share it with colleagues, clients, or anyone you need to involve in your project.

We believe these updates will significantly elevate your FlowCraft experience, allowing you to create and share your flow diagrams with greater clarity and efficiency.

We encourage you to explore the new features and provide your feedback!

Happy FlowCharting!

The FlowCraft Team

Version 1.2.0

New Features

• Auto-Layout Options for Flow Diagrams: We've added a new feature that allows users to automatically arrange their Flow diagrams. This feature provides several layout options, enabling users to experiment and choose the layout that best suits their needs.

Bugs

• Issue with Downloading Diagrams: We've fixed a bug that was causing issues with downloading diagrams. Users can now save their diagrams without any problems.
• Crash on Large Diagrams: A bug that was causing the application to crash when working with large diagrams has been resolved.