Flowchart2Mermaid: A Vision-Language Model Powered System for Converting Flowcharts into Editable Diagram Code

TL;DR

Flowchart2Mermaid is a web-based system that converts static flowchart images into editable, structured Mermaid.js code, enabling easier editing, reuse, and version control of diagrams through vision-language models and interactive features.

Contribution

It introduces a novel system that transforms flowchart images into editable code with interactive refinement, surpassing prior image-to-diagram tools by providing synchronized, structured textual representations.

Findings

Achieved high structural accuracy and flow correctness in conversions.

Enabled interactive editing with inline text, drag-and-drop, and natural language commands.

Developed evaluation metrics for assessing diagram conversion quality.

Abstract

Flowcharts are common tools for communicating processes but are often shared as static images that cannot be easily edited or reused. We present Flowchart2Mermaid, a lightweight web system that converts flowchart images into editable Mermaid.js code which is a markup language for visual workflows, using a detailed system prompt and vision-language models. The interface supports mixed-initiative refinement through inline text editing, drag-and-drop node insertion, and natural-language commands interpreted by an integrated AI assistant. Unlike prior image-to-diagram tools, our approach produces a structured, version-controllable textual representation that remains synchronized with the rendered diagram. We further introduce evaluation metrics to assess structural accuracy, flow correctness, syntax validity, and completeness across multiple models.