need advice on how i can make this happen in mermaidjs

[JunkyardCat]

can i ask how to create this mermaid diagram if this is even possible.

1. i want a way to be able to comment below or on top of the shape
2. is there a way to create and import custom shapes? if so is there a way to associate the shape with a name. lets say i have a shape crreated for engine is there a way to use that shape whenever i mention engine? (see below pic). maybe also color a shape
   

[Sriram-Kumar1]

Hi,

I am a newbie to. I solved a similar issue by creating a subgraph and adding a title for the subgraph. or create a standalone node in the end and set the background to same color as that of the rest of the image seems to be working

I created a node called C and played around with a CSS class for C

flowchart LR
subgraph DP["<font size=4 , color=#286> Development Phase"]
classDef orange fill:#fffcd4,stroke:#000,stroke-width:0px,color:#286,font-size:20px
flowchart LR
subgraph DP["<font size=4 , color=#286> Development Phase"]
classDef orange fill:#fffcd4,stroke:#000,stroke-width:0px,color:#286,font-size:20px

A("Developer") --Local Branch--> B("Dev Branch")
C("Test")
class C orange
end

[JunkyardCat]

why did you declare the flowchart twice? what about my question 2? can it be done?

[Sriram-Kumar1]

2nd flowchart is a typo. not required. Custom images. I have not seen reference in documentation on how to go about it. may be someone else will chip in if they know there is a way.