#mermaidjs — Public Fediverse posts

- @wallabag user?
- :apple_inc: user?
- #latex and/or #mermaidjs enthusiast?

Bingo? You’re in for a treat! Check the latest #frigoligo beta for the new rich content renderer supporting code highlighting, math annotations and mermaid graph.

https://testflight.apple.com/join/nYnbySd8

O laboratório está aberto! Apresento o The Little Mermaid Editor! (#mermaid #mermaidjs #diagram #web #pwa)
https://raccoon.ninja/pt/post/general/lab-app-mermaid-editor/

The Lab is open! Here's The Little Mermaid Editor! (#mermaid #mermaidjs #diagram #web #pwa)
https://raccoon.ninja/post/general/lab-app-mermaid-editor/

I use #mermaidjs diagrams sometimes on my Hugo blog. It came with the theme I had so I learnt to use it. I am not sure when/what caused all my diagrams to all fail on the live site (I just noticed it). I couldn't fix it quickly, so I resorted to using their latest ESM JS via CDN for now.

<https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0>

I always try to serve resources locally, but there are lots of chunk files? I'm not familiar with #Javascript and #ESM

#CDN #jsdelivr it is for now. 🤔

#webdev #hugo

I use #mermaidjs diagrams sometimes on my Hugo blog. It came with the theme I had so I learnt to use it. I am not sure when/what caused all my diagrams to all fail on the live site (I just noticed it). I couldn't fix it quickly, so I resorted to using their latest ESM JS via CDN for now.

<https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0>

I always try to serve resources locally, but there are lots of chunk files? I'm not familiar with #Javascript and #ESM

#CDN #jsdelivr it is for now. 🤔

#webdev #hugo

I use #mermaidjs diagrams sometimes on my Hugo blog. It came with the theme I had so I learnt to use it. I am not sure when/what caused all my diagrams to all fail on the live site (I just noticed it). I couldn't fix it quickly, so I resorted to using their latest ESM JS via CDN for now.

<https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0>

I always try to serve resources locally, but there are lots of chunk files? I'm not familiar with #Javascript and #ESM

#CDN #jsdelivr it is for now. 🤔

#webdev #hugo

I use #mermaidjs diagrams sometimes on my Hugo blog. It came with the theme I had so I learnt to use it. I am not sure when/what caused all my diagrams to all fail on the live site (I just noticed it). I couldn't fix it quickly, so I resorted to using their latest ESM JS via CDN for now.

<https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0>

I always try to serve resources locally, but there are lots of chunk files? I'm not familiar with #Javascript and #ESM

#CDN #jsdelivr it is for now. 🤔

#webdev #hugo

I use #mermaidjs diagrams sometimes on my Hugo blog. It came with the theme I had so I learnt to use it. I am not sure when/what caused all my diagrams to all fail on the live site (I just noticed it). I couldn't fix it quickly, so I resorted to using their latest ESM JS via CDN for now.

<https://github.com/mermaid-js/mermaid/releases/tag/mermaid%4011.14.0>

I always try to serve resources locally, but there are lots of chunk files? I'm not familiar with #Javascript and #ESM

#CDN #jsdelivr it is for now. 🤔

#webdev #hugo

TFW you just dump some test `mermaid.js` in the Nextcloud Notes app for later reference, but you add a ` ```mermaid ` marker because why not.

And it just renders it for you.

EDIT: nice options in the context menu, too!

#selfHosting #homeLab #nextcloud #mermaidjs

I asked "Why Trebuchet?" in the #MermaidJS GitHub discussions, and I got a thorough and interesting answer!

https://github.com/orgs/mermaid-js/discussions/7335#discussioncomment-16233626

#typography

Using #MermaidJS for some diagrams is proving more difficult than I expected.

😭🙄

#MermaidJS #Mermaid #AI

lucidVIEW my native Avalonia / C#) Markdown Viewer reaches v1. Extends @simoncropp's excellent Naiad Mermaid nuget package with some routing experiments I wanted to play with.
Also adds subgraph support, skinning and other stuff (JUST vibe coded though so not releasing separately 🤓)
Now they're all rendered as native Avalonia vectors so I can do things like showing Data Flow through a Mermaid flowchart (also loads about 90x faster than rendering pngs 😜). Oh and you can save mermaid to a png / svg from the viewer too.
THEORETICALLY X-Plat but I can't test it
https://github.com/scottgal/lucidview/releases/tag/v1.0.1
#csharp #dotnet #mermaidjs #markdown

I find it so curious that #MermaidJS, for whatever reason, uses Trebuchet MS as its default font when rendering graphs -- not Arial, the (unfortunately) obvious choice. No matter where one shows up, there's Trebuchet: gangly and unmistakable. #typography

I have made 3 Mermaid diagrams on my Hugo blog and I really enjoyed the process... but I just discovered there's actually an Obsidian Mermaid plugin!

https://github.com/dartungar/obsidian-mermaid

It'll be very handy for making notes about my Indiekit set up and workflow charts. 🔲→🔲

#obsidianmd #obsidian #mermaidjs #mermaid #mermaiddiagrams #visualization #diagrams #opensource #foss

I think some #LLM and also Google Search have picked up on my post for making #MermaidJS sequence diagrams prettier, and now it's quite a regularly accessed post on my blog!

If you're keen: https://notepad.onghu.com/2024/making-mermaid-sequence-diagrams-prettier-part1/

New #blog on #BurgeonLab ✍️

➡️ https://burgeonlab.com/blog/generate-dynamic-og-images-diagram-with-code-scripts/

I wrote a guide on how to locally generate #OpenGraph images using just code and scripts. I explore D2 which is a bit like #MermaidJS and used #Bash to combine #CLI image processing like #imagemagick and #imagecompression.

https://play.d2lang.com/

If you give it a try, please let me know. I'm curious with what you come up with!

#blogging #blogs #guides #smallweb #newpost #blogpost #smolweb #techblog #ogimage

Finally got sick of my blog's mermaid display so made the GREATEST MERMAID DISPLAY EVAH. With a custom control which lets you export, pan, zoon, get full screen etc. Nicer than GitHub's ugly tumour of a control. https://www.mostlylucid.net/blog/enhancingmermaiddiagramswithpanzoomandexport
#mermaidjs #javascript #markdown

TIL: Mermaid markup exists and is supported by GitHub (Cursor's `auto` model put it into an implementation summary report). This is so cool!

1. https://mermaid.js.org
2. https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams

#MermaidJS #Cursor

Ich weiss nie, ob ich #Mermaidjs hassen oder lieben soll. Aber die Integration ins #GitLab Kommentarsystem ist praktisch.

/me baut sich Flowcharts

Somehow, this post on my blog for making #MermaidJS sequence diagrams prettier is quite popular and I needed to refer to it myself today. So, ya, if you want prettier #SequenceDiagrams: https://notepad.onghu.com/2024/making-mermaid-sequence-diagrams-prettier-part1/

(I'm reminded I need to work on Part 2)

#Diagramming #Programming

Somehow, this post on my blog for making #MermaidJS sequence diagrams prettier is quite popular and I needed to refer to it myself today. So, ya, if you want prettier #SequenceDiagrams: https://notepad.onghu.com/2024/making-mermaid-sequence-diagrams-prettier-part1/

(I'm reminded I need to work on Part 2)

#Diagramming #Programming

Somehow, this post on my blog for making #MermaidJS sequence diagrams prettier is quite popular and I needed to refer to it myself today. So, ya, if you want prettier #SequenceDiagrams: https://notepad.onghu.com/2024/making-mermaid-sequence-diagrams-prettier-part1/

(I'm reminded I need to work on Part 2)

#Diagramming #Programming

Somehow, this post on my blog for making #MermaidJS sequence diagrams prettier is quite popular and I needed to refer to it myself today. So, ya, if you want prettier #SequenceDiagrams: https://notepad.onghu.com/2024/making-mermaid-sequence-diagrams-prettier-part1/

(I'm reminded I need to work on Part 2)

#Diagramming #Programming

Somehow, this post on my blog for making #MermaidJS sequence diagrams prettier is quite popular and I needed to refer to it myself today. So, ya, if you want prettier #SequenceDiagrams: https://notepad.onghu.com/2024/making-mermaid-sequence-diagrams-prettier-part1/

(I'm reminded I need to work on Part 2)

#Diagramming #Programming

So what is your tool of choice for diagramming the network? I want something maintainable and not chained to some proprietary web services. Maybe the best way is to make some #MermaidJS generator from #Markdown since both formats are plain text and supported, but I am not sure no one had this bicycle invented yet.

If I had to explain my job... #IOER_FDz .. I'd just show this workflow from the last two days. It's a great example of building reproducible, automated documentation. 🚀

1. Start: A project schema, drafted by colleagues in Excel.

2. Problem: Excel isn't reproducible and is hard to use as a single source of truth for a database.
Solution: I migrated the schema to the universal Protobuf format, making it version-controlled and language-neutral. [1]

3. Problem: Protobuf definitions aren't easy for everyone to read.
Solution: Using an existing #CI/#CD workflow from [3] (cheers @mcnesium), I put the schema on a documentation website. Now it's accessible and legible. [4]

4. Problem: Colleagues still needed a familiar template for data collection.
Solution: Two Python scripts using #pandas now auto-generates both `.xlsx` and open-source `.ods` schema [5] and templates [6] directly from the Protobuf single-point-of-truth, and make all of these available for download, too.

5. Problem: The text-based schema wasn't visual enough.
Solution: Added a script [7] to the CI that transforms the Protobuf files into a #MermaidJS class diagram, rendered directly on the docs site. [8]

6. Problem: The diagram was too narrow in the site's layout.
Solution: The script now generates a second, wide-format version of the diagram for a dedicated fullscreen view. [9]

7. Problem: The static diagram was hard to edit or restyle.
Solution: The CI now generates a shareable link to the Mermaid Live Editor [10]. It reads our latest diagram file, compresses it (using pako/zlib), and bakes it into the URL. Thanks to a code snippet from a friendly stranger on GitHub [11], anyone can now open the *latest* version of the schema in the editor with a single click.

From a static Excel file to version-controlled, multi-format, visual, and interactive documentation, all fully automated. That's the job.

#Automation #GitLab #Python #Protobuf #OpenData #Documentation

@ioer

[1]: https://gitlab.vgiscience.de/casereports/rwlschema
[2]: https://docs.casereports.fdz.ioer.info/
[3]: https://lbsn.vgiscience.org
[4]: https://docs.casereports.fdz.ioer.info/protobuf/
[5]: https://gitlab.vgiscience.de/casereports/rwlschema/-/blob/main/resources/generate_schema.py?ref_type=heads
[6]: https://gitlab.vgiscience.de/casereports/rwlschema/-/blob/main/resources/generate_template.py?ref_type=heads
[7]: https://gitlab.vgiscience.de/casereports/rwlschema/-/blob/main/resources/generate_proto_uml.sh?ref_type=heads
[8]: https://docs.casereports.fdz.ioer.info/konzept/
[9]: https://docs.casereports.fdz.ioer.info/uml/fullscreen.html
[10]: https://mermaidlive.com/play
[11]: https://github.com/mermaid-js/mermaid-live-editor/discussions/1291#discussioncomment-6837936

Generating and Viewing Mermaid Diagrams with Copilot

https://devblogs.microsoft.com/visualstudio/generating-and-viewing-mermaid-diagrams-with-copilot/

#visualstudio #githubcopilot #mermaidjs #ai

Hello.

I am looking for a (ideally #opensource) tool to create #agendas for my meetings.

The graphical representation of my agenda would be rendered from a text-based definition.

A bit like #Mermaidjs that has a generator for Ganntt charts, but the result would be an Agenda in the form of a calendar with blocks for elements of the meeting (Welcome, Presentation 1, Break, Presentation 2, Lunch break, etc...).

Do you know of such a tool ?

Reboots welcome 🙂

Trying to style a #MermaidJS diagram by making yes/no edges distinct for internal documentation, and I get this abomination :neocat_sob:

Yes, if I add a new edge, every single edge with an index greater than whatever I inserted is now off-by-1.

https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html#styling-links

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'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 built an app to generate story relationships using Mermaidjs

https://github.com/herol3oy/austen

#HackerNews #I #built #an #app #to #generate #story #relationships #using #Mermaidjs

mermaidjs #app #development #story #relationships #visualization

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

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

I've made a proposal for #mermaidjs #timingdiagram syntax. Would love a look and your opinions. I like using mermaidjs quite a bit because it's easy to embed in the web.

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

Mermaid diagram syntax is a low-key very useful skill to have as a software developer.

#mermaid #developer #softwaredevelopment #programming #diagram #mermaidJS #flowcharts #dev #technology #markdown

No cybersecurity and genAI in this post, just a bit of coding. 😉

𝐌𝐞𝐫𝐦𝐚𝐢𝐝.𝐥𝐢𝐯𝐞 𝐂𝐨𝐝𝐞 𝐑𝐞𝐧𝐝𝐞𝐫𝐞𝐫: https://encode-mermaid-diagram.streamlit.app/

🚀 I've just developed a Streamlit app that takes input in Mermaid.js code and outputs a rendered link for mermaid.live.

This functionality enables users to seamlessly edit their code, addressing any errors or dynamically modifying the diagram as needed. I believe this tool could be useful for those working with Mermaid charts.

Feel free to check it out and see how it can streamline your workflow!

Read more:

https://medium.com/@antonio.formato/mermaid-live-code-renderer-with-python-2e8cb677e963

Spoiler: soon this will be an integrated feature in 𝐓𝐈 𝐌𝐢𝐧𝐝𝐦𝐚𝐩: https://ti-mindmap-gpt.streamlit.app/ 📊✨

#Streamlit #MermaidJS #DataVisualization #pyhton #mermaid #timindmap #coding

I'm still not out of the rabbit hole of searching for an #OpenSource #PersonalKnowledgeManagement software. 🐰

I'm gonna give a second try to @zettlr tomorrow! Their docs are *surprisingly* user-friendly and they claim to stick to the pure #CommonMark where probable. It's all the while being nice to researchers with citing, inline usage of #TeXLaTeX, #MermaidJS, and pop-over #footnotes. Provision of the simple #PDF export and #Pandoc customization are welcome, too!

But, to be fair, I may be overexaggerating how good #Zettlr is because of my recent disgust with #VendorLocking. In fact, almost anything that closely follows the common spec and is #FreeSoftware might suffice already. Having something as advanced and closer to the roots is certainly refreshing!

#Markdown #zettelkasten #authoring #Zettlr #ReferenceManager #ReferenceManagers #PKM #NoteTaking #NoteTakingApp #NoteTakingApps #KaTeX #frontmatter #Obsidian #Logseq #Anytype #Notion #VendorLock #VendorLockIn #FOSS #FLOSS

A great way to see what #mermaid diagrams #github supports

https://github.com/mermaidjs/mermaid-gitbook/tree/master/content

#MermaidDiagrams #MermaidJS

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

Repo with example code from my #SeaGL2023 talk "Diagrams as Code: An Intro to #MermaidJS" is now live at https://github.com/CBielstein/MermaidDiagramsTalk

Did you know that @obsidian had support for #mermaidjs since some time now?

Just discovered it yesterday... as if Obsidian wasn't already the best note-taking application !

#notetaking #DesktopTools

Did you know that @obsidian had support for #mermaidjs since some time now?

Just discovered it yesterday... as if Obsidian wasn't already the best note-taking application !

#notetaking #DesktopTools

Did you know that @obsidian had support for #mermaidjs since some time now?

Just discovered it yesterday... as if Obsidian wasn't already the best note-taking application !

#notetaking #DesktopTools

Did you know that @obsidian had support for #mermaidjs since some time now?

Just discovered it yesterday... as if Obsidian wasn't already the best note-taking application !

#notetaking #DesktopTools

If I use #MermaidJS to create a #SequenceChart of a #RESTfulAPI, is there a set of rules that give more #semantic meaning to it?