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
#DiagramsAsCode
Diagrams as Code with AI with Jacqui Read
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
Why great software developers draw 🧠✏️
At #AIMHDC2025 I shared 4 diagrams every dev should know:
🧩 Sequence
🔄 Flowchart
🏗️ Class
🗃️ ERD
Because seeing the shape of your idea can be the difference between being heard & being understood.
How do you turn complex ideas into clear, meaningful diagrams? In her interview @tekiegirl talks about how to use Diagrams-as-Code with AI, the limitations of LLM-generated visuals, and tips for creating diagrams you can trust. 💡
Don’t miss her workshop at #SAGconf where you’ll learn to confidently combine Diagrams-as-Code with AI and elevate your software architecture visualizations! 🚀
#SoftwareArchitecture #DiagramsAsCode #AIinTech #SpeakerInterview #iSAQB
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
}
```
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
#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/
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/
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/
Ooooh there's a Mermaid extension for Google Docs! https://workspace.google.com/marketplace/app/mermaid_diagramming_and_charting_tool/636321283856 #diagramsascode
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]
[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
@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
Client Info
Server: https://mastodon.social
Version: 2025.07
Repository: https://github.com/cyevgeniy/lmst