DOCSEARCHbyAlgolia
Submit Docs

AWS Icons for PlantUML

repository·main·Indexed 21 days ago

https://github.com/awslabs/aws-icons-for-plantuml

A collection of PlantUML sprites, macros, and includes for Amazon Web Services (AWS) services and resources. Version 23.0 enables developers to create professional AWS architecture diagrams as code using PlantUML, the C4 model, and Mermaid architecture-beta diagrams. The library provides AWS-specific icons, colors, and styling helpers, including support for dark mode and integration with Structurizr Lite via a custom theme.

Tokens
24.6K
Snippets
60
Records
80
Agent score
76%

What's inside aws-icons-for-plantuml

  1. Switch between technical and simplified views

    main

    The library provides a AWSSimplified.puml file that filters out technical details while maintaining entity interactions. To switch from a detailed technical view to a simplified view, uncomment the !include AWSPuml/AWSSimplified.puml line in your diagram.

    !define AWSPuml https://raw.githubusercontent.com/awslabs/aws-icons-for-plantuml/v23.0/dist
!include AWSPuml/AWSCommon.puml

' Uncomment the following line to create simplified view
' !include AWSPuml/AWSSimplified.puml

  3. Use AWS Icons with C4-PlantUML, Structurizr, and Mermaid

    main

    The repository provides experimental support for mapping AWS architectures to other diagramming tools via specific JSON configuration files located in the dist/ directory:

    • C4-PlantUML: Use the examples in examples/s3-upload-workflow for reference.
    • Structurizr DSL: Use dist/aws-icons-structurizr-theme.json.
    • Mermaid Architecture: Use dist/aws-icons-mermaid.json.

  4. How to include AWS services and resources

    main

    After including AWSCommon.puml, you can add AWS components to your diagram using two methods:

    1. Individual include files: Include only the specific service you need. This is more efficient for large diagrams.
      • Syntax: !include AWSPuml/<Category>/<ServiceName>.puml
    2. Category include files: Include a single file that contains all services within a specific category.
      • Syntax: !include AWSPuml/<Category>/all.puml

    All available service files are located in the dist/ directory of the repository.

    ' Example of individual service inclusion
!include AWSPuml/Storage/SimpleStorageService.puml

' Example of category-wide inclusion
!include AWSPuml/BusinessApplications/all.puml

  5. Use AWS colors in PlantUML

    main

    AWS symbols use specific color macros defined in AWSCommon.puml. You can use these macros directly or use the $AWSColor($category) function to retrieve a category-specific color based on a normalized category name.

    Using the $AWSColor function

    To get the color for a specific AWS category, pass the normalized name of that category to the $AWSColor function.

    Examples:

    • For 'Application Integration', use $AWSColor(ApplicationIntegration)
    • For 'Management & Governance', use $AWSColor(ManagementGovernance)
    $AWSColor(ApplicationIntegration)
$AWSColor(ManagementGovernance)

  8. Use AWS icons in Mermaid architecture diagrams

    main

    You can use AWS icons within Mermaid's architecture-beta diagram type by registering an icon pack containing the aws-icons-mermaid.json file (which is in iconifyJSON format).

    To view the provided mermaid.html example, the dist folder must be served at http://localhost:8000/. In Visual Studio Code, you can use the http.server CORS 8000 task to achieve this.

    When defining services in your Mermaid diagram, use the syntax service <id>(<icon-name>)[<label>] to associate an icon with a service.

    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11.4.1/dist/mermaid.esm.mjs';
let baseUrl = 'http://localhost:8000';
let icons = await fetch(`${baseUrl}/aws-icons-mermaid.json`).then((res) => res.json());
mermaid.registerIconPacks([
  {
    name: 'logos',
    loader: () =>
      fetch('https://unpkg.com/@iconify-json/logos@1/icons.json').then((res) => res.json()),
  },
  {
    name: 'aws',
    loader: () => icons
  },
]);
mermaid.initialize({ startOnLoad: true });

  9. Enable Dark Mode for AWS symbols

    main

    You can switch to a dark theme by setting the $AWS_DARK variable to true before including AWSCommon.puml. This redefines the core background, foreground, and arrow colors.

    When !$AWS_DARK = true is set:

    • $AWS_BG_COLOR becomes #000000 (Black)
    • $AWS_FG_COLOR becomes #FFFFFF (White)
    • $AWS_ARROW_COLOR becomes #9BA7B6 (Light Gray)
    !$AWS_DARK = true
!include AWSCommon.puml

  10. Reference AWS Icons via version tags

    main
    When referencing this repository in your PlantUML files, it is recommended to use a specific version release tag instead of the main branch. This ensures stability and prevents breaking changes when new icons or filenames are added. Note that since version v11.1, filenames follow the original icon names provided by AWS (though leading _Amazon_ or _AWS_ prefixes have been removed to reduce filename length).