Add text filter to render Mermaid graphs

Created on 18 August 2024, 6 months ago
Updated 19 September 2024, 5 months ago

Problem/Motivation

We use Mermaid extensively in statically-generated documentation sites, mostly for workflow and sequence diagrams. We've started building a Drupal-based application, where we'd like to use Mermaid for similar reasons.

Proposed resolution

Add input filter to render Mermaid graphs.

Remaining tasks

I already have a basic working implementation. So next steps would be to commit that to a feature branch for further testing and iteration.

Feature request
Status

Fixed

Version

1.0

Component

Code

Created by

🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @ergonlogic
  • 🇬🇧United Kingdom joachim

    Nice idea, but I think this belongs in the GraphAPI module.

  • 🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

    Hi @joaquim. Thanks for taking a look at this.

    Could you clarify why you think this feature fits better in GraphAPI than in Mermaid Integration? The Mermaid JS library is already provided in the other module.

  • 🇬🇧United Kingdom joachim

    The Mermaid module is an extension to GraphAPI which provides a specific graph renderer.

    The way to interact with a graph is via the GraphAPI module.

  • 🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

    I see that we already have a TGF filter plugin in GraphAPI. But since the Mermaid filter plugin will depend on the external library, we'd need to add the library that in GraphAPI too, instead of just re-using the one provided by the Mermaid Integration module.

    I'd also like to support various themes, and maybe later other Mermaid config. Code to handle this could probably be extracted into a MermaidTrait, to further reduce duplicated code between both Filter and Graph plugins.

  • 🇬🇧United Kingdom joachim

    > But since the Mermaid filter plugin will depend on the external library, we'd need to add the library that in GraphAPI too, instead of just re-using the one provided by the Mermaid Integration modu

    I don't really follow this, sorry. The Mermaid module is meant to be used as an extension to GraphAPI. You don't need to add the Mermaid library to GraphAPI, you just enable both modules and then your graphs can be rendered with Mermaid.

  • 🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

    The Mermaid module is meant to be used as an extension to GraphAPI.

    I agree that's mostly what's currently implemented there, along with adding the Mermaid JS library. But it's called "Mermaid Integration", uses the mermaid namespace, and resides at drupal.org/project/mermaid, not drupal.org/project/graphapi_mermaid.

    I'm suggesting adding an input filter that renders Mermaid syntax (using only the Mermaid library). It doesn't really need GraphAPI functionality at all. It's basically just replacing `[mermaid]...[/mermaid]` blocks with `

    ...

    `.

    For reference, I've attached a patch (for the mermaid project). Note that it uses the Mermaid JS library provided by the Mermaid Integration module, but otherwise stands alone, using only Drupal core.

    It also allows for the selection of a Mermaid theme, which partially duplicates MermaidEntityRelationship::defaultOptionsForm. As I'd mentioned previously, this seems like an opportunity to consolidate Mermaid configuration functionality in a MermaidTrait. I'd argue that such a trait ought to also live in the Mermaid module, and would certainly seem out-of-place in GraphAPI.

    For the sake of having the patch work, I've moved this issue back to Mermaid Integration. If you insist, I'll move it back to GraphAPI, and revise the patch accordingly.

  • Status changed to Needs review 6 months ago
  • 🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

    Since there's a patch now, I suppose this should be "Needs review"

  • 🇬🇧United Kingdom joachim

    I've only just remembered how Mermaid graphs work by parsing text... So I was completely misunderstanding this, sorry!

    So yes, I can see this input filter is Mermaid-specific.

    But then I'm not 100% sure it belongs in this module, as this module is the GraphApi integration. Someone wanting just your input filter ends up having to install GraphApi which they don't want. Not sure how best to resolve this though.

  • 🇬🇧United Kingdom joachim

    Ok, I've had an idea:

    - we keep the mermaid libraries in the mermaid module
    - we move the GraphAPI support to a submodule called mermaid_graphapi
    - we add the new input filter to another submodule called mermaid_filter

  • Status changed to Needs work 6 months ago
  • 🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

    Thanks, @joachim. That all makes sense.

  • 🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

    I created 📌 Move GraphAPI support to a submodule Needs review to handle the first part.

  • Status changed to Postponed 6 months ago
  • 🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

    Let's get 📌 Move GraphAPI support to a submodule Needs review done first, so that the text filter stuff can more cleanly be added as a sub-module.

  • Status changed to Needs review 6 months ago
  • 🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

    I've pushed a commit that's mostly the same as in the patch, except in a sub-module, per 📌 Move GraphAPI support to a submodule Needs review , with the change in namespace, etc. Obviously, this branch extends the one from that issue.

  • Status changed to Fixed 5 months ago
  • 🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

    I merged this branch to 1.0.x.

    The fix here is a sub-module that shouldn't affect any of the rest of the codebase.

    • ergonlogic committed ebb297bb on 1.0.x
      Issue #3468773 by ergonlogic and joaquim: Add text filter to render...
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024