Check whether MermaidJS can support GSN arrow behaviour

[AoifeHughes]

No description provided.

[kallewesterling]

Here's a newly added comment that may be of interest for a CSS workaround: mermaid-js/mermaid#1236 (comment)

[chrisdburr]

Thanks, @kallewesterling.

There's another issue beyond styling though. Let's take the following example:

graph TD
  A[Goal Claim] --> B[\Strategy\]
  A -.-> C[Context]
  B --> D(Property Claim);
  D --> E[(Evidence)];

Loading

This graph has all of our core elements in it, and comes close to what we want, but there are two problems/compromises:

1. The dashed line could be used in place of GSN's In Context Of link, and just divert from it in terms of style—if the CSS workaround is not feasible.
2. But, it wouldn't address the fact that the Context element is not on the same level as the Goal Claim

I can't even seem to get this to work with sub-graphs. For instance, the following code renders two parts of an assurance case correctly:

flowchart TD
  subgraph TOP
    direction LR
    A[Goal Claim] -.-> C[Context] 
  end
  B[\Strategy\] --> D(Property Claim);
  D --> E[(Evidence)];

Loading

But then as soon as you link the goal claim to the strategy element, it fails again:

flowchart TD
  subgraph TOP
    direction LR
    A[Goal Claim] -.-> C[Context] 
  end
  A --> B
  B[\Strategy\] --> D(Property Claim);
  D --> E[(Evidence)];

Loading

And, then to top it all off, even if we can get this to work with sub-graphs, we would end up with unnecessary boxes all of the graph every time we want to add a context element.

[kallewesterling]

I've looked into the levels of the boxes, and how to make sure they're all level. I have formulated and drawn something that describes our issue above and can post it to mermaid's issues, but, as I was about to do that, I looked through the existing issues, and it looks like it has been discussed quite extensively as a new work-in-progress called Block Diagram. Obviously, this is not something that exists yet, but is being discussed in mermaid-js/mermaid#3358.

I can go ahead and submit our agreement with the thread there, if you'd like? Otherwise, it seems like this is a feature not yet available, but definitely underway as there's a vibrant (and recent) discussion on GitHub, but also an actual proposal in the repository's wiki as well. However, as there is no support for it currently, we need more of a conversation about how we'll move forward with our own work.

[chrisdburr]

Thanks, Kalle. Please do add a voice to the existing conversations to express additional support/need for this.

However, as you say, we do need to figure out a plan B.

[aranas]

example for nested subgraphs:
https://hackmd.io/@sopara/SyTXE4XR3

[kallewesterling]

Resolving with React Flow