d2 VS mermaid

I work on the D2 project ([0]) and we switched from other Javascript runners (v8go) to Goja. Using a JS runtime with a dependency on cgo means your Go program loses the (huge) benefit of cross-compiling to different architectures, since at build time it gets linked to the architecture-specific libc.

If you're interested in some production code with Goja, this is our code for calling RoughJS [1] from Go in order to produce the hand-drawn diagram look: [2]

[0] https://github.com/terrastruct/d2

While not embedded in markdown, I like d2 [1]. I can use it with org-babel to embed and view the diagrams on emacs. After using graphviz for years, the visual output seems more polished to me. With that said, I want to give pikchr a try.

[1]:https://d2lang.com/

In the next post I'll deep-dive into the D2 language which also has a huge set of features. Stay tuned.

Notion serves as a knowledge base and documentation hub for our whole company, and as QA we use it to document our practices and store some test data references. In particular, I love the ability to reference pages in other pages, creating a web of knowledge across all our documents - and with the native integration of Mermaid.js, creating flowcharts is fun and easy.

mindmap-to-mermaid: last agent transform the mind-map representation in a mermaid syntax ready for the visualization

Today, tools like Mermaid and PlantUML have taken center stage, thanks to their ability to generate diagrams with text-based commands. Even better, AI-powered assistants like Claude, ChatGPT, and GitHub Copilot have made generating diagrams even easier. These tools work directly within a developer's environment, creating diagrams that are version-controlled and integrated seamlessly into workflows.

The secret is that Q will not draw a diagram (like we would do on a piece of paper), I will ask Q to generate diagram as code with mermaid. So, my diagram will be a text that I can modify in a code editor and that I can reuse as a source for multiple tools. In this case I will use it later to rebuild my project.

Some nits:

The "Example" buttons don't jump out at me; I found them but it took a while. Also consider labeling them with their point, e.g. "Example 3: Color"

If you change the input text to something well-formed, the graph seems to update immediately. But if you change it to something ill-formed, the graph doesn't update immediately — and then if you click "Generate" manually, it blanks the input box. Either this is a bug, or the "Generate" button doesn't do what I think it does (i.e. generate output). Again, adding a noun to the verb might help. Or just adding some usage information somewhere on the page.

For those like me who've never heard of "Mermaid," apparently it's like GraphViz's dot language but different. https://github.com/mermaid-js/mermaid

* Drawn by mermaid.

The Markdown format is a blessing for documentation. While many are aware it can create headings, tables, text styles, and lists, not many know about extensions available to the basic Markup language. Today, we'll learn about Mermaid.js. This powerful yet simple diagramming tool speaks to the aspirations of Markdown format.

The diagrams in the first half of the article are made with tldraw https://www.tldraw.com/

The lower half look like the output from Mermaid https://mermaid.js.org/

Lets, assume we want to add rendered Mermaid diagrams to our page by transforming the source code in fenced code blocks like the following: