Flowchart2Mermaid: A Vision-Language Model Powered System for Converting Flowcharts into Editable Diagram Code
By: Pritam Deka, Barry Devereux
Potential Business Impact:
Turns drawings into editable computer diagrams.
Flowcharts are common tools for communicating processes but are often shared as static images that cannot be easily edited or reused. We present \textsc{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.
Similar Papers
GenAI-DrawIO-Creator: A Framework for Automated Diagram Generation
Graphics
Makes drawing diagrams automatic from words.
See it. Say it. Sorted: Agentic System for Compositional Diagram Generation
Artificial Intelligence
Turns messy drawings into neat, editable computer diagrams.
Structured Extraction from Business Process Diagrams Using Vision-Language Models
Artificial Intelligence
Turns pictures of business plans into usable computer code.