Build BEAUTIFUL Diagrams with Claude Code (Full Workflow)

The problem is coding agents like Claude Code are not very visual tools. When you want it to explain something to you visually or even just help you explain something to someone else, they really don't do a good job unless you do a lot of prompting and give it the right abilities. And that is what I have been working on. And so I've taken my entire workflow and I've packaged it up into a skill so I can use Claude code or any coding agent to help me build all these beautiful and practical diagrams. And so giving my coding agent the ability to argue visually. This is the primary instruction set that guides Claude code how to argue visually, creating the JSON files for these Excal diagrams. And my favorite part about this workflow is not only does it create the Excal diagram, but it also validates it visually. So it will render the diagram, take a screenshot, look at the PNG, and then iterate on any of the imperfections. And I just get insane results with this workflow when we have this self validation cuz like I said earlier, coding agents are not the best at visual tasks. They need the ability to check their own work and we can do that with Excal. Honestly, the easiest thing is you can just ask your coding agent to help you set up the Excalra diagram skill because then it knows to read the readme and it'll pretty much just go through the manual steps on its own so that by the time it's your turn to use the skill, everything is all good to go and you can just simply ask it to build any kind of diagram like I showed in the simple demo earlier. That's one of the most important things to make the diagrams on brand to you or just the color scheme that you like using. So the core philosophy that I have built a lot of prompting around in the skill. mmd is teaching the coding agent how to argue visually. So explaining that like we don't just want to put things in a bunch of blocks cuz when it generates excal diagrams without this skill. It's very blocky for lack of better words. But instead we want to argue visually we want the structure and labels to explain the entire concept. That is the excalra diagram skill. And I encourage you to clone this repo, bring in the skill, and just try it right now on a PDF, even a codebase. The possibilities are endless. And it does such a good job creating a starting point, literally saving me hours and hours every single week.