Ability to use svg images instead of boxes in sequence and flowchart diagram for use e.g. AWS Icons

[mariotoffia]

Is your feature request related to a problem? Please describe.

I'm doing lots of visio diagrams since I need to use AWS svg images such as S3, Lambda, API Gateway, DynamoDB etc. I would like to use those in sequence and flowchart diagrams.

We're using mermaid through asciidoc.js -> kroki to render those in our code and otherwise asciidoc documentation that I use git to version / diff etc. We also use vs code plugin for preview.

Myself is driving a open source golang project to render asciidoc from go code comments. We use this when we write our lambdas or other AWS specific functionality and it would be really nice to be able to render diagrams from that with our imported AWS svg assets using mermaid.

Describe the solution you'd like

A way to use svg reference to be rendered instead of a box.

Describe alternatives you've considered

Today I use visio, export SVG, checkin to git, that is included with the other mermaid diagrams.

Additional context

None.

[heathsnow]

This would be fantastic. Now that GitHub supports Mermaid directly in markdown I'd love to use it for AWS infrastructure diagrams.

I'm currently using https://diagrams.mingrammer.com/ which works fine but I still have to execute Python to generate the diagram. The ability for GitHub markdown to just display my diagrams without requiring a separate Python execution and storing the image in the repo would be great.

[derekmurawsky]

Generic SVG support would also enable Font-Awesome and other libraries to be used. This would take Mermaid into a whole other level of use-cases.

[davinkevin]

I love mermaid but I'm about to drop it because of this sadly 😓

[CrackTheCode016]

Has there been any progress made here? Ideally, the workflow I imagine is:

• Be able to read an SVG from a directory
• Define a set size for imported SVGs as a theme configuration parameter (svgHeight and svgWidth)
• Define it as a custom item at the top of a mermaid diagram (i.e., awesomeIcon)
• Reference it as needed: ["Awesome Square Box"] --> awesomeIcon

It could be added as a new diagram class. This way one could easily import entire libraries of custom SVG icons.

[shurick81]

hi @derekmurawsky,

Generic SVG support would also enable Font-Awesome and other libraries to be used. This would take Mermaid into a whole other level of use-cases.

Is not it like Font-Awesome is already supported by Mermaid but not by Github?

[derekmurawsky]

hi @derekmurawsky,

Generic SVG support would also enable Font-Awesome and other libraries to be used. This would take Mermaid into a whole other level of use-cases.

Is not it like Font-Awesome is already supported by Mermaid but not by Github?

Possibly, I tried it in notion and one other place (don't remember where) and was not able to get it to work. I thought more generic svg support would enable it as a specific example, but would enable any other such provider as well.

[wweevv-johndpope]

you can ask chatgpt to do this for you - just jam chatgpt with as much relevant guff - and hey presto.

using the following - create python code with a parent lambda calling a child lambda - diagrams import Diagram
from diagrams.aws.compute import EC2```

UPDATE - for mac users

brew install graphviz

Chef's kiss

[markscamilleri]

@wweevv-johndpope I appreciate that you're trying to provide a workaround. However, with all due respect, although you can ask ChatGPT to do many things for you, it doesn't mean that it will provide the correct response. I admit my opinion is that it's a glorified content writer in a conversational UI format and doesn't really have skills, and I have formed this based on the fact that it gets things wrong so many times and it's easy to confuse and hallucinate.

For example, the solution you're quoting that ChatGPT provided you actually solves the issue in Python, and not in Mermaid whcih uses an entirely different language and stack to draw diagrams from an entirely different syntax.

Back to this issue, this issue is a feature request for the mermaid project, and not a question on how this can be done.