#diagramsascode — Public Fediverse posts

My favorite #diagramsAsCode tool #D2 has open sourced it's #TALA rendering engine. This is a fantastic tool for doing #architecture diagrams, if that's your jam.

https://d2lang.com/blog/tala-is-open-source/

One Open-source Project Daily

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

https://github.com/mermaid-js/mermaid

#1ospd #opensource #diagrams #diagramsascode #documentation #flowchart #javascript #mindmap #typescript #umldiagrams

Diagrams as Code with AI with Jacqui Read

https://tube.tchncs.de/w/8GNNq6Ufq4qnhGKMGRirso

After adding some more complexity to my diagram on Mermaid.live, it was starting to look very...interesting. To be fair, the Architecture type on their live app is marked as beta, so I decided to give Eraser a try and I like that a lot more.

I can express nested groups of things, draw connections between groups or individual nodes, and then drag/drop pieces until they get where I want them to be. Then I can move connections so it's a bit more organized and I must say, I like it a lot.

I'd like to figure out a way to label the lines, e.g. switch port 1 <-> router port 2 but I'm not sure yet if I can do that.

The website is up at app.eraser.io if you're curious

#homelab #mermaid #eraser #documentation #diagramsascode #diagram #networking

I'm at #GOTO #Copenhagen with my Diagrams-as-Code with #AI masterclass. 🙌🏻 You'll leave with the knowledge you need to select the best notation for your context and to get experimenting with AI and automation in your diagrams & documentation.

Join me to compare #MermaidJS, #PlantUML, and #Structurizr, and how AI can and cannot help us with diagrams-as-code.
https://jcq.me/gotoc25?utm_source=Mastodon&utm_medium=Social&utm_campaign=professional&id=oIaeIGq7J9

#diagramsAsCode #software #softwareDesign #softwareDevelopment #softwareArchitecture #softwareEngineering

I love doing #architecture #diagrams in #D2

I got in the habit of adding relevant links in comments, but now I realize I've overlooked the actual feature. They were there the whole time!

Making elements in my diagrams clickable by adding a `link` is so simple but a total game changer!

```
kvs: Kinesis Video Streams {
link: https://aws.amazon.com/kinesis/video-streams
icon: https://icons.terrastruct.com/aws%2FAnalytics%2FAmazon-Kinesis-Video-Streams.svg
shape: image
}
```

#diagramsascode

I'm excited to be teaching my #DiagramsAsCode with #AI workshop live and in-person at #GOTO #Copenhagen! 🙌

Join me to:
💡 Gain a grounding in #PlantUML, #MermaidJS, and #Structurizr
💡 Understand the tradeoffs of diagrams-as-code and models vs. standard diagrams
💡 Recognise the limitations and useful use cases of using diagrams-as-code with LLMs

https://gotocph.com/2025/masterclasses/545/diagrams-as-code-with-ai?utm_source=Mastodon&utm_medium=Social&utm_campaign=professional&id=CY1fU-wKcG

#softwareDevelopment #softwareDesign #softwareArchitecture #software

into #diagramsascode again the last days.

conclusions:
⚪ many small, early stage, single purpose approaches. tried #structurizr #d2 #mermaid a bit, came from #plantuml
⚪ all of them are sw centric, not extendable on user level

➡️ not really usable for #flightlevels inspired #worksystemsdesign

If you're doing sequence diagrams and considering to use #MermaidJS, here are a couple of posts that will help:
* Migrating from #WebSequenceDiagrams to MermaidJS: https://notepad.onghu.com/2024/migrating-web-sequence-diagrams-to-mermaid/
* Making MermaidJS Sequence Diagrams prettier (Part 1): https://notepad.onghu.com/2024/making-mermaid-sequence-diagrams-prettier-part1/

#DiagramsAsCode #programming

If you like #DiagramsAsCode and have a bunch of sequence diagrams created with WebSequenceDiagrams but want to use #Mermaid now, you need to know of a few differences.

I wrote a brief post about migrating from WebSequenceDiagrams to Mermaid: https://notepad.onghu.com/2024/migrating-web-sequence-diagrams-to-mermaid/

#programming

The more I use #Structurizr for #ArchitectureAsCode / #DiagramsAsCode the more I find small things that need to be searched up. This post is a collection of things that I need to remember so that I can find them easily: https://notepad.onghu.com/2024/structurizr-quick-notes-part1/

#programming

Ooooh there's a Mermaid extension for Google Docs! https://workspace.google.com/marketplace/app/mermaid_diagramming_and_charting_tool/636321283856 #diagramsascode

[2/2]
.... You have to understand the AI's output, so you will have to learn!

O'Reilly AI in Software Architecture playlist: https://learning.oreilly.com/playlists/77f5be74-d5a8-460b-99b0-fce5fec94bcb/
Smart diagramming in Draw.io: https://drawio.com/blog/smart-diagram-generation
More on diagraming with AI: https://medium.com/@davidroliver

#software #softwareArchitecture #softwareDevelopment #AI #communication #learning #diagramsAsCode #diagrams

A great discussion about #AI in #softwareArchitecture & #communication on the @OReillyMedia Superstream! I was asked about whether AI can help us with software #diagrams.
My current thoughts on this are that if you already have some PlantUML or Mermaid then AI can help you make complex changes, learn these diagramming-as-code syntaxes, and fix syntax errors. But remember the AI has knowledge and not wisdom. You cannot trust its output.. [1/2]

#software #learning #diagramsAsCode

@andatki I'm happy to wait - Dec is #DiagramsAsCode for me :)

Am I the only one who finds #MermaidJS very powerful but the diagrams a bit ugly? Are there some examples of real pretty diagrams/ themes that people use? Any references/ sites?

Ref: #Structurizr pics are really pretty out of the box
Disclaimer: Mermaid Newbie

#DiagramsAsCode

Time to try something new?

#structurizr #DiagramsAsCode