Mermaid support

Ideas & Features
21

We’re currently trialing Fibery with the hope of consolidating our project management tools and knowledge base. However, the lack of Mermaid support makes it unsuitable for our technical specifications. In principle, we need support for a ```mermaid code block that will render the diagram, or else a dedicated slash command, just like in other tools like Slite or Nuclino and various Markdown editors.

1 Like
22

Possible via Embed BTW

Note: just clicking on Share in Mermaid and using the sharing link will not work, so the steps to make an embed are

  • Open the diagram full-screen

  • Copy the URL in this browser tab

  • Create an embed in Fibery, add this URL, and enable Compatibility mode

23

That doesn’t cut it.

  • The diagram code is not part of the document.
  • It will not be included in document exports. Copy-to-markdown only includes a link to the full screen view. You can neither access the diagram code via that link, nor is the diagram rendered in any markdown editor.
  • Changes to the embed URL don’t appear in the version history. But even if they did, you would only see an update to an obscure URL.
  • The full-screen view of the Mermaid editor does not render a link back to the editor. Thereby, it is not easily possible to update an embedded diagram.
  • The Mermaid live editor does not work with some browser security settings.
24

There is a workaround for who likes to develop their own integration:

For example, three fields and one api call automation:

  • Mermaid Code (Source Field): A rich text field storing Mermaid syntax (in a code block).
  • Mermaid Diagram (Output Field): A rich text field displaying a static image.
  • Mermaid Live Preview (Embed Field): A rich text or embed field with an iframe for editable diagrams.
  • Automation: Using a Mermaid api service (like the Mermaid Chart REST API) or your own self-hosted mermaid server, to create diagrams, render images, embed editable views, and retrieve updated code.

When that is set up, the workflow would be:

  1. Modify the diagram in the Embed Field.
  2. Click the “Update Code” automation button which retrieves the updated code from the Mermaid server API which updates the “Mermaid Code” field.
  3. (Optional): The automation updates the “Mermaid Diagram” field with a new static image.
1 Like
25

I would second this. Ideally, we could use Fibery AI to create a mermaid flow and then essentially import that flow into a Whiteboard.

26

agreed, it is what I would like too