Use mermaid for "defmt ecosystem" diagram #764
Conversation
Remove md styling, as github doesn't render that Remove legend Add legend as separate graph Remove titles, doesn;t render = for pinned dependencies Add legend with invisble link The link (hopefully!) fixes it's positioning
|
I will do a pre-release on crates.io to see if it renders there as well. |
Unfortunately it fails to render. See https://crates.io/crates/defmt/0.3.6-beta.0 crates.io shows a warning popup with "Failed to render mermaid diagram." and in the console it prints "WARN: Could not find the language 'mermaid', did you forget to load/include a language module?". It could be because I am not using the default renderer. |
Nope. Changing back to the default renderer does not change anything. |
hm, I find the mermaid one (at least as rendered here) more pretty |
|
We need to wait for rust-lang/crates.io#6786 to be resolved |
The bug is fixed and does render on crates.io now! 🎉 |
Merge queue setting changed
| @@ -29,7 +29,40 @@ It still might work on older rust versions, but this isn't ensured. | |||
|
|
|||
| The following diagram illustrates the user-facing and internal crates of the defmt framework. | |||
|
|
|||
|  | |||
| ```mermaid | |||
| %%{ init: { 'flowchart': { 'curve': 'step', "defaultRenderer": "elk" } } }%% | |||
There was a problem hiding this comment.
"defaultRenderer": "elk" seems to be the culprit for the ~~~ invisible link not working.
There was a problem hiding this comment.
To my mind the mermaid chart is less clear than the old one because the crossed out links were more obvious. This makes the legend being connected even more confusing.
Not using the elk renderer produces this
Also not great.
Maybe do ask the mermaid people for the invisible link with the elk renderer?
What
This PR removes the previous (static) diagram of the defmt ecosystem from the README and replaces it with a mermaid code block.
Context
Mermaid is a JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically. It is widely used. By now both GitHub and crates.io do render mermaid diagrams, in GitHub you can even interact with them (zooming in and out mostly, but still).
Why
This change will make it easier to keep the diagram up to date, since we don't rely on other tooling (draw.io in our case) to modify the diagram.
Drawbacks
As a grain of salt I have to say that I actually do like the aesthetics of the previous diagram more (see below). But I still think that the advantages outweigh that. It is possible to style the mermaid diagram with CSS, but I did not want to go down that road.
Before
After