Mermaid is a markup language to generate diagrams and charts.
1 Like
How do you imagine that Fibery and Mermaid would play together?
Are you thinking of sending (suitably reformatted) Fibery structured data to the mermaid rendering engine?
Or are you thinking that mermaid images could be embedded in documents/rich text fields so that they can be edited directly from Fibery?
Or…?
I am not sure what the difference between your two options is. I was thinking you would be able to enter the markup in Fibery and have it rendered. Just like markdown.
OK, so it sounds a bit like the Notion-Mermaid integration, where users could add a ‘Mermaid block’ to a rich text field/document, and it would be rendered as code or the resultant image.
That kind of thing?
3 Likes
Yes, just like that.
Being able to take Fibery structure data, and autogenerate a diagram would be pretty awesome. Like a whiteboard but auto-generated flowchart instead.
This will soon be possible using Fibery whiteboards, assuming that the flow arrows can be encoded as relations in the Fibery schema
1 Like
With auto layout? Will new rows be added automatically?
It is already possible to create new entities (= rows) from the whiteboard. Add a card, and then type the name of the entity to be created, choose the type (database) and the newly-created entity will now be shown on the whiteboard.
Yes, but i have to add it manually and reposition it manually. That defeats the purpose, since every time a new entity is created it requires manyal work.
Auto layout as in mermaid js solves this
1 Like
Maybe I misunderstood. I assumed you were talking about adding a card to the whiteboard and having this result in a newly-created entity in the database.
Did you mean that you would want the whiteboard to automatically display entities that have been created via other views in the workspace?
At the moment, the whiteboard will only display entities if you explicitly tell it to.
Auto-layout is a challenging issue. If a set of entities are laid out nicely on a whiteboard, and a new one is added, any auto-layout mechanism could risk making the layout worse.
Also, auto-layout is very challenging for large numbers of highly-interconnected entities.
Totally, that’s why i would go with mermaid js.
What if we had a new view type “javascript”.
Where in edit mode one could add a js snippet to render the view? Use the usual filters etc as for other views.
Maybe the view could get as input a json with the data.
This way integration of mermaid js would be trivial.
1 Like
To be honest, I think it’s unlikely that Fibery willl support a JS view. Although it would be quite flexible, I think it would only be a small fraction of users who will benefit.
Circling back to this, whiteboards are great collaborative tools but I tend to create flow charts almost exclusively for documentation purposes.
I love mermaid js because it reduces the mental load of creating complex charts to simply that of the content. I aggressively avoid most charting tools in favor of ordered lists and number lists because of the amount of time and skill investment required to create the visuals on top of sorting out the information.
I mostly use mermaid for flow charts and class diagrams.
It would be a luxury to “import” Fibery schema into a mermaid text block. I think the essential functionality here should be the ability to generate a variety of charts for pages/rich text views.
2 Likes
My envisioned use case for fibery is to write an internal knowledge base. My team builds data integrations between ERP systems so there’s no clear starting point like in a desktop program (where you usually would start documenting from the initial screen and user flows as you delve deeper into the program’s features). Having a rich model with entities and proper links between everything would in my mind make it so that somebody can start from the endpoint they are thinking of, then jump to related exchanged messages and back, or climb up to the owning system to see what the system is even supposed to do.
We want to use sequence diagrams because they best describe how data ping-pongs between systems, but they are painful to properly layout by hand. Mermaid (JS / the language) would automate that just from some simple ASCII text.
There’s the Notion-Mermaid block approach where we could just insert the code into a rich text field or document, but another way would be to take a look at how LucidChart adopted the Mermaid language (right now we use LucidChart in my company for all diagramming needs).
They basically made a tool so that you can generate one or more charts inside of a LucidChart document. Each bit of code gets sent to its own container (or what you call a “section” in Fibery whiteboards) with just 4 edge connectors, but still the ability to drag notes or other text on top. Update the Mermaid code and the container has its contents replaced.
I found it interesting that one of the biggest chart apps just embedded another tool, most likely they saw the potential for customers turning away from their tool and thus included it wholesale.
While having access to Fibery entities in Mermaid would seem nice, it seems to me that it mismatches with the manually curated functionality of Fibery whiteboards and the “diagrams as code” value proposition of Mermaid. I’d be equally as happy if we could generate a diagram block on a Whiteboard and then just put a section “Mentioned entities” next to it with Fibery’s “Insert Card” feature so people can click through.
2 Likes
Just circling back to this as my developers have protested to me turning off Whimsical because Fibery’s Whiteboards are powerful enough now with comments and all.
Their main need was Mermaid support. I would think something like the Notion-Mermaid integration @Chr1sG mentioned, would be a great start. It would solve my initial problem of fragmentation and cost.
The more exciting option would of course be to be able to write Mermaid syntax to generate Whiteboards and fully connect that with Fibery’s entities, etc. I understand that the lay outing is a challenge, but I think that would be secondary if it’s otherwise well-integrated.
2 Likes
Thanks posting this. I was about to request the Mermaid → Whiteboard feature 
While I’m at it, I would add Text → 
AI → Mermaid → Whiteboard
1 Like
BTW: I added my vote to the top post by clicking the Vote button. I see 2 new replies here but no extra votes?
1 Like
I’m all out of votes, I’m so lost without them…
4 Likes