mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
70.79k stars 6.35k forks source link

Allow Images/Badge Status as graph node in Github markdown pages #2884

Open isidore opened 2 years ago

isidore commented 2 years ago

Is your feature request related to a problem? Please describe. I would like to create a graph showing my project dependencies and their current status

For Example:


  graph TD
  id1[StarterProject.Java.Maven<BR><B>StatusBadgeImageHere</B>] -->   Java;
  StarterProject.Java.Gradle--> id2[or<br><b>StatusBadgeImageHere</b>] --> Java;
  Java --> id3[<b>StatusBadgeImageHere<b>]

Describe the solution you'd like It would look like graph with images

Describe alternatives you've considered I have tried a lot of googling for adding images, both directly and as CSS. Neither work in github markdown but I had some success with images in the mermaid live editor if I set the securityLevel='loose' with .png But this still fails with an SVG,

Additional context In general images in nodes opens a lot of possibilities, I would also be very happy to pair with a committer to implement this (I have had a lot of success pairing with issue submitters on my own open source projects)

exsilium commented 2 years ago

I would definitely see a use of this and would welcome this enhancement. 👍 However, the implementation of such feature should be scoped to more than just graph nodes. E.g an Entity Relationship diagram already has built in support for attribute inclusions which can be helpful for svg badges. A node can be a representation of a logical software unit that has a number of attribute states (ci/cd, security, published versions, vulnerabilities, issues etc). I realize that the number of SVG icons that the browser needs to pull in will slow things down but is a great way to have a manageable view of things instead of a flat list of states.

erDiagram
  pylon ||--|| architect-build : depends
  pylon ||--|| dryice : depends
  pylon ||--|| jsdav : depends
  pylon ||--|| smith : depends
  pylon ||--|| treehugger : depends
  pylon ||--|| v8debug : depends
  pylon ||--|| vfs-architect : depends
  pylon ||--|| vfs-nodefs-adapter : depends
  vfs-architect ||--|| vfs-local : depends
  vfs-architect ||--|| vfs-http-adapter : depends
  pylon {
    dependabot yes
    publish yes
  }
  architect-build {
    dependabot yes
    publish yes
  }
  dryice {
    dependabot yes
    publish yes
  }
  jsdav {
    dependabot yes
    publish yes
  }
  smith {
    dependabot yes
    publish yes
  }
  treehugger {
    dependabot yes
    publish yes
  }
  v8debug {
    dependabot yes
    publish yes
  }
  vfs-architect {
    dependabot yes
    publish yes
  }
  vfs-nodefs-adapter {
    dependabot yes
    publish yes
  }
  vfs-local {
    dependabot yes
    publish yes
  }
  vfs-http-adapter {
    dependabot yes
    publish yes
  }

So in short, I think this is a cool idea for implementation and would hope a wider scope so that badges can be included in other diagrams as well.

dosaki commented 1 year ago

I'd definitely love to see this included.

Hopefully across all graph-type nodes

rgbsys commented 2 months ago

I was trying to do that and I couldn't. It would be great to have this functionality