Add flowchart graph format

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

Problem/Motivation

The current GraphAPI integration generates an Entity Relationship diagram. I am interested in implementing a GraphFormat plugin for Flowchart diagrams.

Proposed resolution

There are many options within the Mermaid Flowchart implementation, including node shapes and styling of links between nodes. The initial implementation should probably just allow these to be specified in plugin config. As a later enhancement, it might be interesting to map node shapes to entity bundles, or similar.

There are many other options, such as adding comments, or defining sub-graphs, that I'd prefer to ignore for now.

However, I would like to implement some basic Interaction. Specifically, the click href behaviour would allow for generating links to the entities representing the nodes.

Remaining tasks

  1. Use <pre> tags for Mermaid blocks -- DONE
  2. Add Mermaid Flowchart View style plugin -- DONE
  3. Make vertices link to their entities -- DONE
    1. Make this configurable (on/off checkbox) -- DONE
  4. Make flowchart direction configurable (both default and view-specific) -- DONE
  5. Make flowchart vertex shape configurable (both default and mapping) -- DONE
  6. Make flowchart edge style configurable (both default and mapping) -- DONE
  7. Add support for edge labels -- DONE

User interface changes

It will probably be easier to define our own Views style plugin, rather than taking over and altering the default GraphAPI one. We'd still inherit from that one, but I don't like the idea of wrapping a bunch of conditional logic around the Mermaid-specific code.

API changes

N/A

Data model changes

N/A

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
  • Status changed to Needs review 6 months ago
  • 🇨🇦Canada ergonlogic Montréal, Québec 🇨🇦

    Here's a first pass at implementing the Mermaid Flowchart format.

    Note that I also overrode the template to use a <pre> tags, since that appears to be the suggested approach now. This also has the nice benefit of making the Views preview more legible. I can split this into a separate issue, if that's preferable.

    This currently hard-codes vertices rendered as circles, and that the flowchart will be left-to-right. It also doesn't implement the 'click' behaviour. I think I'll need to extend GraphAPI's Views style plugin (and use hook_views_plugins_style_alter()) to address that stuff. But I'm certainly open to other suggestions.

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

    I've made a bunch more progress on this, but let's get 📌 Move GraphAPI support to a submodule Needs review done first, so that this feature can more cleanly be added to the GraphAPI sub-module.

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

    I'm going to move to a git-based workflow, so that 📌 Move GraphAPI support to a submodule Needs review can be a separate branch, that we then base the work here (and in Add flowchart graph format Fixed ) off of.

    So as not to inadvertently lost any of the work I've done so far, I'll just attach a patch of my latest iteration on this.

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

    I updated the issue summary with my progress so far, and some planned next steps.

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

    It will probably be easier to define our own Views style plugin, rather than taking over and altering the default GraphAPI one. We'd still inherit from that one, but I don't like the idea of wrapping a bunch of conditional logic around the Mermaid-specific code.

    I've implemented a new views style plugin just for Mermaid graphs. I also overrode the default GraphAPI views style plugin, to remove the Mermaid graphs. I'm not really sure this is the best approach, but I couldn't figure out anything better.

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

    Flowchart edge styles are now configurable.

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

    Flowchart direction is now configurable.

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

    Linking vertices their entities is now optional.

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

    Edge labels are now supported.

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

    Merged to 1.0.x.

    I tested that providing our own views style plugin doesn't break the existing erDiagram graph plugin. It does add some options in the views settings that aren't currently supported by that plugin (eg. dynamic vertex shape and edge styling). But I think we can deal with that in a separate issue. The simplest solution would be to have the erDiagram plugin go back to using the default GraphAPI views style plugin.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024