If you are working with Amazon Web Services, I highly recommend downloading their AWS Architecture Icons. I prefer downloading their PowerPoint toolkit, since it includes icons for all their services, well organized by category, but also other resources, like group and resource icons.
For other vendors, many companies have a Media or Brand page for press releases, with downloadable assets and instructions on how to use their logos. Here is the Media page for GitHub, for example. As you can see, if you clicked on the link, they provide downloadable versions of their main logos. However, other logos, like Github Actions, are missing. In this case, I often rely on searching online for their logos, trying to find a good transparent png image.
I started this article saying I was working on an updated version of an architecture diagram for my Blog Engine. Well, that was kind of a lie. I hadn’t started yet, so here we go. There is really not much to it, so I’ll focus on the key parts. If anything does not make sense, let me know on Twitter.
I’ll pick dark theme for this one.
My Blog Engine uses two GitHub repositories, the source and the destination (GitHub Pages site), a combination of Github Actions, and few AWS Services. For this, I’ll be using the group template from the AWS slides and define three groups.
From the AWS toolkit, I’ll be using nodes for SQS Queue, SQS Message, AWS Lambda and S3 Bucket. The toolkit provides two different sets of icons, for services and for service resources. Choose whichever you feel looks better. For Github Actions, I downloaded a transparent PNG from the GitHub documentation site.
Since both the source and destination are web pages, I like representing these with actual screenshots. In this case, I took a screenshot of this source GitHub Issue, and another screenshot of the destination article on my blog.
Keynote has three types of line connector on the Shapes menu. However, the third one (the one that looks like a Bezier curve) is the only one that will actually snap to nodes and automatically adjust when the nodes are moved.
You can customize the connector by selecting a head stile (arrow) and the connection style (straight, curved, angled). It’s a good idea to also give some padding to the connector, so it doesn’t touch the nodes directly.
Here is how my diagram turned out. Maybe too dark with the black background? Not sure. What do you think?
This article was written as an issue on my Blog repository on GitHub (see Issue #14)