Official AWS/GCP/Azure architecture icons

[loozhengyuan]

Context

The new architecture diagram is a refreshing addition to Mermaid and my team are looking to replace all our cloud architecture diagrams with Mermaid.js. We are deeply integrated with AWS services so having the full set of architecture icons for the major cloud service providers like AWS, GCP, Azure, etc., will be a very positive experience for diagram creators.

Issue

At present, the native icons are sourced from Iconify. I have tried to request support for these icons through them in iconify/icon-sets#152 but was unsuccessful. The existing set of AWS icons in Iconify are sourced from the logos icon set and I have tried to request for the full set to be added in gilbarbara/logos#733 but they were understandably unwilling to add all icons en masse.

With that, it leaves me with the option of adding my own custom icons but it is not something viable. In most of our work, the Mermaid diagrams are rendered on public collaborative platforms like GitHub, GitLab, Confluence, etc., so it is not something configurable by the users.

Proposal

I am not certain what is the best way forward but having a set of ready-to-use architecture icons like in DrawIO will be a big draw factor for Mermaid architecture diagrams. I have 2 proposed ideas that could help resolve this issue but will defer to your consideration and judgement:

• Work with AWS/GCP/Azure to have official icon set and support it out-of-the-box in Mermaid
• Allow users to inline custom icons directly in the syntax

Many thanks!

[mgrubb]

I had this same desire, though I didn't necessarily need to have them hosted on a CDN or other external source. I'm not sure about licensing with regards to distributing the AWS Icons, but I do have a set of scripts that will take the icons from https://aws.amazon.com/architecture/icons/ and generate an iconify icon set. The process is a bit slap dash at the moment, but shouldn't take much to be repeatable. It does some name mapping but could probably simplified a bit. I'll try and get some things collected and post a link to a repo.

[hakanson]

I just learned icons are supported in Mermaid. I'm a maintainer for aws-icons-for-plantuml and have some scripts that process the AWS icon set for use in PlantUML (and a Structurizr theme).

Over holiday break, I'm going to tweak https://github.com/awslabs/aws-icons-for-plantuml/blob/main/scripts/icon-builder.py#L835-L838 and see if I can output the correctly formatted JSON file.

[hakanson]

I made progress with PR awslabs/aws-icons-for-plantuml#79

As an example:

---
config:
  theme: base
  themeVariables:
    darkMode: false
    archEdgeColor: "#232F3E"
    archEdgeArrowColor: "#232F3E"
    archGroupBorderColor: "#7D8998"
---
architecture-beta
  service user(aws:user)[User]
  group awscloud(aws:aws-cloud)[AWS Cloud]
  group region(aws:region)[Region] in awscloud

  group s3bucket(aws:simple-storage-service)[Amazon S3 bucket] in region

    service video(aws:multimedia)[video] in s3bucket
    service audio(aws:tape-storage)[audio] in s3bucket
    service transcript(aws:documents)[transcript] in s3bucket
    
    user:R -[1 upload]-> L:video
    video:R --> L:audio
    audio:R --> L:transcript

  service handler(aws:lambda-lambda-function)[ObjectCreated event handler] in region
  service mediaconvert(aws:elemental-mediaconvert)[AWS Elemental MediaConvert] in region
  service transcribe(aws:transcribe)[Amazon Transcribe] in region

  handler:T <-[2]- B:video
  mediaconvert:T -[3]-> B:audio
  transcribe:T -[4]-> B:transcript

  group workflow(aws:step-functions-workflow)[AWS Step Functions workflow] in region

    service extractaudio(aws:lambda-lambda-function)[extract audio] in workflow
    service transcribeaudio(aws:lambda-lambda-function)[transcribe audio] in workflow

    extractaudio:R --> L:transcribeaudio
    extractaudio{group}:L <-[Start Execution]- B:handler
    extractaudio:T --> B:mediaconvert
    transcribeaudio:T --> B:transcribe

[loozhengyuan]

@hakanson Looks good, thanks for the great effort!

[hakanson]

I pushed some updated examples into PR awslabs/aws-icons-for-plantuml#79

Also, created bugs #6162 #6166 #6167 and feature #6168