We all use Markdown for documents and pretty much everything else, but seeing the structure visually has always been difficult for me. I was looking for a way to easily see the links and dive into detailed content when needed.

Of course, I could have used something like Mermaid, but I wanted to build it from scratch to make it more flexible, interactive, and dependency-free.

It's quite easy to use. You can adjust the colors of the blocks, easily create links, and most importantly, you can do all of this in a single Markdown file.

The demo I linked to is a chat application that also functions as a diagram generator. While chatting with AI, Markdown text is written for you on the left side. You can copy the code it generates. It is ready to use on your own site; all you need to do is add the library's CDN link to your page. You can access detailed documentation via the GitHub or npm link below or the links in the top right corner of the chat.

github: https://github.com/bthndmn12/diagram-blog

npm: https://www.npmjs.com/package/diagram-blog

chat demo: https://diagram-chat-ai.vercel.app