{"id":8340,"date":"2025-11-13T21:53:54","date_gmt":"2025-11-13T13:53:54","guid":{"rendered":"https:\/\/people.utm.my\/shahabuddin\/?p=8340"},"modified":"2025-11-13T21:55:25","modified_gmt":"2025-11-13T13:55:25","slug":"that-parse-error-feeling-why-we-gave-our-diagram-tool-an-ai-brain","status":"publish","type":"post","link":"https:\/\/people.utm.my\/shahabuddin\/?p=8340","title":{"rendered":"That “Parse Error” Feeling: Why We Gave Our Diagram Tool an AI Brain"},"content":{"rendered":"\n

We\u2019ve all been there. You’re trying to map out a system, a user flow, or just a simple idea. You open a “Diagrams-as-Code” tool like Mermaid.js because you’re a developer, and that’s what you’re supposed<\/em> to do.<\/p>\n\n\n\n

Ten minutes later, you’re staring at a “Parse Error” message, ready to throw your keyboard across the room.<\/p>\n\n\n\n

You missed a quote. You used a parenthesis instead of a bracket. You forgot a semicolon. This strict, unforgiving syntax, which is great for computers, is often a massive pain for humans.<\/p>\n\n\n\n

Diagrams are supposed to clarify<\/em> thinking, not add friction to it. This frustration is the exact reason we started our project: The Mermaid Diagramming and Charting Tool<\/strong>. We decided that if the tool was going to be “dumb,” we’d give it an AI brain to help out.<\/p>\n\n\n\n

What if Your Editor Was an Expert Partner?<\/h3>\n\n\n\n

Our idea was simple. What if, instead of just being a text box, your editor could act like a senior developer or a design expert, looking over your shoulder and offering helpful advice?<\/p>\n\n\n\n

So, we built it.<\/p>\n\n\n\n

We created a simple, clean, web-based tool where you can type Mermaid code on one side and see your diagram appear on the other. But unlike other editors, we added a few “magic” buttons.<\/p>\n\n\n\n

These buttons connect our simple editor to the powerful Google Gemini AI. We built a secure “middle-man” (a simple script on our server) that passes your diagram and your questions to the AI, so your private API keys are never exposed in the browser.<\/p>\n\n\n\n

This AI integration allows our tool to do three things that feel like pure magic.<\/p>\n\n\n\n

The 3 Magic Features<\/h3>\n\n\n\n

1. The “Ugh, Just Fix It!” Button<\/h4>\n\n\n\n

This is the most-used feature. The moment our tool sees that dreaded “Parse Error,” a new button appears: “Fix with AI.”<\/strong><\/p>\n\n\n\n

When you click it, the tool doesn’t just send your broken code to the AI. It also sends the exact error message<\/em> it received. It’s like telling a doctor, “It hurts here<\/em>.”<\/p>\n\n\n\n

The AI, acting as a Mermaid.js expert, reads the error, finds the mistake in your code\u2014that missing end<\/code>, that unquoted string\u2014and simply fixes it for you. The parse error vanishes, and your diagram appears. It’s the “undo” button for your frustration.<\/p>\n\n\n\n

2. The “Make It Pretty” Button<\/h4>\n\n\n\n

Sometimes your diagram works<\/em>, but it’s just plain ugly. You have long sentences that overlap, nodes are crammed together, and it\u2019s unreadable.<\/p>\n\n\n\n

This is where the “Improve with AI”<\/strong> button comes in.<\/p>\n\n\n\n

When you click this, you’re asking the AI to put on its “designer” hat. It scans your diagram for things that are hard to read. Its main trick? It intelligently finds long lines of text and inserts Mermaid-compatible line breaks (<br><\/code>) to make them wrap nicely. It turns a messy, wide diagram into a clean, well-formatted, and professional-looking chart.<\/p>\n\n\n\n

3. The “Change Its Personality” Button<\/h4>\n\n\n\n

This one is the real game-changer.<\/p>\n\n\n\n

You’ve just finished a complex flowchart<\/code>. It’s perfect. And then your manager asks, “This is great, but can I see this as a sequence diagram<\/em>? I want to see the order<\/em> of events.”<\/p>\n\n\n\n

In the past, this meant starting from scratch. A whole new file. A whole new syntax.<\/p>\n\n\n\n

With our tool, you just select “Sequence Diagram” from a dropdown menu and hit “Convert with AI.”<\/strong><\/p>\n\n\n\n

The AI doesn’t just look at the syntax. It reads and understands the meaning<\/em> of your flowchart. It identifies the actors, the steps, and the relationships. Then, it rewrites your diagram in a completely new format, preserving the core logic. You can turn a flowchart into a mind map, a class diagram into a list, or anything in between. It’s like a universal translator for your ideas.<\/p>\n\n\n\n

Why This Matters<\/h3>\n\n\n\n

This isn’t just about making prettier diagrams. It’s about lowering the barrier to good design and documentation.<\/strong><\/p>\n\n\n\n

Tools like Mermaid are powerful, but their steep learning curve scares people away. Our project proves that AI can act as the ultimate “pair programmer” or “helpful assistant.” It bridges the gap between a human’s idea and the machine’s strict rules.<\/p>\n\n\n\n

By building AI into<\/em> the workflow, we’ve turned a tool that was often frustrating into one that feels collaborative. It\u2019s a small step, but it\u2019s a peek into a future where our tools don’t just tolerate<\/em> us\u2014they actively help<\/em> us.<\/p>\n\n\n\n

We built this tool at UTM to solve our own headaches. We hope this concept inspires others to think about how AI can make all our development tools a little more human.<\/p>\n","protected":false},"excerpt":{"rendered":"

We\u2019ve all been there. You’re trying to map out a system, a user flow, or just a simple idea. You open a “Diagrams-as-Code” tool like Mermaid.js because you’re a developer, and that’s what you’re supposed to do. Ten minutes later, you’re staring at a “Parse Error” message, ready to throw your keyboard across the room. You missed […]<\/p>\n","protected":false},"author":6946,"featured_media":8335,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[1285,111,110],"tags":[163,1300,1298],"class_list":["post-8340","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-project","category-research","tag-development","tag-diagram","tag-mermaid"],"uagb_featured_image_src":{"full":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/11\/Screenshot-2025-11-11-at-7.38.55-PM.png",1429,862,false],"thumbnail":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/11\/Screenshot-2025-11-11-at-7.38.55-PM-150x150.png",150,150,true],"medium":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/11\/Screenshot-2025-11-11-at-7.38.55-PM-300x181.png",300,181,true],"medium_large":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/11\/Screenshot-2025-11-11-at-7.38.55-PM-768x463.png",640,386,true],"large":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/11\/Screenshot-2025-11-11-at-7.38.55-PM-1024x618.png",640,386,true],"1536x1536":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/11\/Screenshot-2025-11-11-at-7.38.55-PM.png",1429,862,false],"2048x2048":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/11\/Screenshot-2025-11-11-at-7.38.55-PM.png",1429,862,false],"slider-thumb":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/11\/Screenshot-2025-11-11-at-7.38.55-PM-542x352.png",542,352,true],"pop-thumb":["https:\/\/people.utm.my\/shahabuddin\/wp-content\/uploads\/sites\/890\/2025\/11\/Screenshot-2025-11-11-at-7.38.55-PM-542x340.png",542,340,true]},"uagb_author_info":{"display_name":"Dr. Shah","author_link":"https:\/\/people.utm.my\/shahabuddin\/?author=6946"},"uagb_comment_info":0,"uagb_excerpt":"We\u2019ve all been there. You’re trying to map out a system, a user flow, or just a simple idea. You open a “Diagrams-as-Code” tool like Mermaid.js because you’re a developer, and that’s what you’re supposed to do. Ten minutes later, you’re staring at a “Parse Error” message, ready to throw your keyboard across the room. You missed…","_links":{"self":[{"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/posts\/8340","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/users\/6946"}],"replies":[{"embeddable":true,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8340"}],"version-history":[{"count":2,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/posts\/8340\/revisions"}],"predecessor-version":[{"id":8343,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/posts\/8340\/revisions\/8343"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=\/wp\/v2\/media\/8335"}],"wp:attachment":[{"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8340"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=8340"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/people.utm.my\/shahabuddin\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=8340"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}