{"id":82326,"date":"2020-09-10T10:26:18","date_gmt":"2020-09-10T17:26:18","guid":{"rendered":"https:\/\/cloudblogs.microsoft.com\/opensource\/?p=82326"},"modified":"2025-06-24T10:49:27","modified_gmt":"2025-06-24T17:49:27","slug":"cloudskew-sketch-cloud-architecture-diagrams","status":"publish","type":"post","link":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/","title":{"rendered":"CloudSkew makes it easy to sketch cloud architecture diagrams"},"content":{"rendered":"\n<p>CloudSkew is a free online diagram editor that helps you draw cloud architecture diagrams. <a href=\"https:\/\/www.cloudskew.com\/\">CloudSkew<\/a> diagrams can be securely saved to the cloud and icons for AWS, Microsoft Azure, Google Cloud Platform, Kubernetes, Alibaba Cloud, Oracle Cloud (OCI), and more are included.<\/p>\n\n\n\n<p>CloudSkew is currently in public preview and the full list of features and capabilities can be seen <a href=\"https:\/\/www.cloudskew.com\/docs\/features.html\">here<\/a>, as well as sample diagrams <a href=\"https:\/\/www.cloudskew.com\/docs\/samples.html\">here<\/a>. In this post, we&#8217;ll review CloudSkew&#8217;s building blocks, as well as discuss the lessons learned, key decisions, and trade-offs made in developing the editor.<\/p>\n\n\n<figure class=\"wp-block-image alignnone attachment-large size-large webp-format\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/cloudskew-architecture_1-1024x576.webp\" alt=\"diagram of CloudSkew architecture\" class=\"wp-image-82374 webp-format\" srcset=\"\" data-orig-src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/cloudskew-architecture_1.webp\"><figcaption class=\"wp-element-caption\"><em><strong>Cloudskew architecture<\/strong><\/em><\/figcaption><\/figure>\n\n\n\n<p>CloudSkew&#8217;s infrastructure is built on several Azure services, pieced together like LEGO blocks. Let\u2019s review the individual components below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"apps\">Apps<\/h2>\n\n\n\n<p>At its core, CloudSkew&#8217;s front-end consists of two web apps:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.cloudskew.com\/\">Landing page<\/a>: static VuePress site, with all pages authored in Markdown. The default VuePress theme is used without any customization, although we&#8217;re loading some marketplace plugins for support image zoom, Google Analytics, sitemap, and more. All images on this site are loaded from a CDN. We chose VuePress for SSG primarily due to its simplicity.<\/li>\n\n\n\n<li><a href=\"https:\/\/app.cloudskew.com\">Diagram editor<\/a>: an Angular 8 SPA written in TypeScript<em>. <\/em>To access the app, users login using GitHub or LinkedIn credentials. This app also loads all of its static assets from a CDN, while relying on the <a href=\"https:\/\/www.cloudskew.com\/about\/cloudskew-architecture.html#web-apis\">back-end web APIs<\/a> for fetching dynamic content. The choice of Angular as the front-end framework was mainly driven by our familiarity with it from prior projects.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"web-apis\">Web APIs<\/h2>\n\n\n\n<p>The back-end consists of two web API apps, both authored using ASP.NET Core 3.1:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CloudSkew APIs<\/strong> facilitate CRUD operations over diagrams, diagram templates, and user profiles.<\/li>\n\n\n\n<li><strong>DiagramHelper APIs<\/strong> are required for printing or exporting (as PNG\/JPG) diagrams. These APIs are isolated in a separate app since the memory footprint is higher, causing the process to recycle more often.<\/li>\n<\/ul>\n\n\n\n<p>Using ASP.NET Core&#8217;s <a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/fundamentals\/middleware\/?view=aspnetcore-3.1&amp;WT.mc_id=cloudstories-blog-alehall\">middleware<\/a>, we ensure that:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>JWT authentication is enforced. Use of <a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/security\/authorization\/policies?view=aspnetcore-3.1&amp;WT.mc_id=cloudstories-blog-alehall\">policy-based authorization<\/a> for RBAC ensures that claims mapping to user permissions are present in the JWT.<\/li>\n\n\n\n<li>Only the diagram editor (front-end app) can invoke these APIs (<a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/security\/cors?view=aspnetcore-3.1&amp;WT.mc_id=cloudstories-blog-alehall\">CORS settings<\/a>).<\/li>\n\n\n\n<li>Brotli <a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/performance\/response-compression?view=aspnetcore-3.1&amp;WT.mc_id=cloudstories-blog-alehall\">response compression<\/a> is enabled for reducing payload sizes.<\/li>\n<\/ul>\n\n\n\n<p>The web APIs are stateless and operate under the assumption that they can be restarted or redeployed any time. No sticky sessions and affinities, no in-memory state, and all state is persisted to databases using <a href=\"https:\/\/docs.microsoft.com\/en-us\/ef\/core?WT.mc_id=cloudstories-blog-alehall\">EF Core<\/a> (an ORM).<\/p>\n\n\n\n<p>Separate DTO\/REST and DBContext\/SQL models are maintained for all entities, with <a href=\"https:\/\/automapper.org\/\">AutoMapper<\/a> rules being used for conversions between the two.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"identity-authn-and-authz\">Identity, AuthN, and AuthZ<\/h2>\n\n\n\n<p><a href=\"https:\/\/auth0.com\/\">Auth0<\/a> is used as the (OIDC compliant) identity platform for CloudSkew. Users can login via GitHub or LinkedIn. The handshake with these identity providers is managed by Auth0 itself. Using implicit flow, ID, and access tokens (JWTs) are granted to the diagram editor app. The <a href=\"https:\/\/auth0.com\/docs\/libraries\/auth0js\/v9\">Auth0.JS SDK<\/a> makes all this very easy to implement. All calls to the back-end web APIs use the access token as the bearer.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/auth0-social-connections_2.png\" alt=\"auth0 social connections screenshot\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Auth0 creates and maintains the user profiles for all signed-up users. Authorization\/RBAC is managed by assigning <a href=\"https:\/\/auth0.com\/docs\/authorization\/concepts\/rbac\">Auth0 roles<\/a> to these user profiles. Each role contains a collection of permissions that can be assigned to the users (they show up as custom claims in the JWTs).<\/p>\n\n\n\n<p>Auth0 <a href=\"https:\/\/auth0.com\/docs\/rules\">rules<\/a> are used to inject custom claims in the JWT and whitelist\/blacklist users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"databases\">Databases<\/h2>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/sql-database\/sql-database-technical-overview?WT.mc_id=cloudstories-blog-alehall\">Azure SQL Database<\/a> is used for persisting user data, primarily for <code>Diagram<\/code>, <code>DiagramTemplate<\/code>, and <code>UserProfile<\/code>. User credentials are not stored in CloudSkew&#8217;s database (that part is handled by Auth0). User contact details like emails are MD5 hashed.<\/p>\n\n\n\n<p>Because of CloudSkew&#8217;s auto-save feature, updates to the <code>Diagram<\/code> table happens very frequently. Some steps have been taken to optimize this:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/rxjs-dev.firebaseapp.com\/api\/operators\/debounceTime\">Debouncing<\/a> the auto-save requests from the diagram editor UI to the Web API.<\/li>\n\n\n\n<li>Use of a queue for load-leveling the update requests (see <a href=\"https:\/\/www.cloudskew.com\/about\/cloudskew-architecture.html#queue-based-load-leveling\">this section<\/a> for details).<\/li>\n<\/ul>\n\n\n\n<p>For the preview version, the Azure SQL SKU being used in production is <code>Standard\/S0 with 20 DTUs (single database)<\/code>. Currently, the database is only available in one region. Auto-failover groups and active geo-replication (read-replicas) are not currently being used.<\/p>\n\n\n\n<p>Azure SQL&#8217;s <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/sql-database\/sql-database-automated-backups?tabs=single-database&amp;WT.mc_id=cloudstories-blog-alehall\">built-in geo-redundant database backups<\/a> offer weekly full database backups, differential DB backups every 12 hours, and transaction log backups every five to 10 minutes. Azure SQL internally stores the backups in RA-GRS storage for seven days. RTO is 12 hours and RPO is 1 hour. Perhaps less than ideal, but we&#8217;ll look to improve this once CloudSkew&#8217;s usage grows.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/sql-azure-pitr-backups_3.png\" alt=\"SQL Azure Pitr Backups screenshot\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/cosmos-db\/introduction?WT.mc_id=cloudstories-blog-alehall\">Azure CosmosDB<\/a>&#8216;s usage is purely experimental at this point, mainly for the analysis of anonymized, read-only user data in <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/cosmos-db\/graph-introduction?WT.mc_id=cloudstories-blog-alehall\">graph format over gremlin APIs<\/a>. Technically speaking, this database can be removed without any impact to user-facing features.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"hosting-and-storage\">Hosting and storage<\/h2>\n\n\n\n<p>Two <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/storage\/blobs\/storage-blobs-overview?WT.mc_id=cloudstories-blog-alehall\">Azure Storage Accounts<\/a> are provisioned for hosting the front-end apps: landing page and diagram editor. The apps are served via the <code>$web<\/code> blob containers for static sites.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-storage-static-website_4-1024x412.webp\" alt=\"a screenshot of azure storage static website\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Two more storage accounts are provisioned for serving the static content (mostly icon SVGs) and user-uploaded images (PNG, JPG files) as blobs.<\/p>\n\n\n\n<p>Two <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/app-service\/containers\/app-service-linux-intro\">Azure App Services on Linux<\/a> are also provisioned for hosting the containerized <a href=\"https:\/\/www.cloudskew.com\/about\/cloudskew-architecture.html#web-apis\">back-end web APIs<\/a>. Both app services share the same <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/app-service\/overview-hosting-plans?WT.mc_id=cloudstories-blog-alehall\">App Service Plan<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>For CloudSkew&#8217;s preview version we&#8217;re using the <code>B1 (100 ACU, 1.75 GB Mem)<\/code> plan, which don\u2019t include automatic horizontal scale-outs, which are scale-outs that need to be done manually).<\/li>\n\n\n\n<li>Managed Identity is enabled for both app services, required for <a href=\"https:\/\/www.cloudskew.com\/about\/cloudskew-architecture.html#externalized-configuration-self-bootstrapping\">accessing the Key Vault<\/a>.<\/li>\n\n\n\n<li>The <code>Always On<\/code> settings have been enabled.<\/li>\n\n\n\n<li>An <a href=\"https:\/\/docs.microsoft.com\/en-in\/azure\/container-registry\/container-registry-intro?WT.mc_id=cloudstories-blog-alehall\">Azure Container Registry<\/a> is also provisioned. The deployment pipeline packages the API apps as Docker images and pushes to the container registry. The App Services pull from it (using webhook notifications).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-container-registry_5.png\" alt=\"a screenshot of azure container registry\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"caching-and-compression\">Caching and compression<\/h2>\n\n\n\n<p>An <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/cdn\/cdn-overview?WT.mc_id=cloudstories-blog-alehall\">Azure CDN profile<\/a> is provisioned with four endpoints, the first two using the hosted front-end apps (landing page and diagram editor) as origins and the other two pointing to the storage accounts (for icon SVGs and user-uploaded images).<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-cdn-profile-endpoints_6.png\" alt=\"azure cdn profile endpoints screenshot\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>In addition to caching at global POPs, <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/cdn\/cdn-improve-performance?WT.mc_id=cloudstories-blog-alehall\">content compression at POPs<\/a> is also enabled.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"subdomains-and-dns-records\">Subdomains and DNS records<\/h2>\n\n\n\n<p>All CDN endpoints have <code>&lt;subdomain&gt;.cloudskew.com<\/code> custom domain hostnames enabled on them. This is facilitated by using <a href=\"https:\/\/docs.microsoft.com\/en-in\/azure\/dns\/dns-overview?WT.mc_id=cloudstories-blog-alehall\">Azure DNS<\/a> to create CNAME records that map <code>&lt;subdomain&gt;.cloudskew.com<\/code> to their CDN endpoint counterparts.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-dns-cname-records_7.png\" alt=\"a screenshot of azure dns cname records\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"https-and-tls-certificates\">HTTPS and TLS certificates<\/h2>\n\n\n\n<p>Custom domain HTTPS is enabled and the TLS certificates are <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/cdn\/cdn-custom-ssl?tabs=option-1-default-enable-https-with-a-cdn-managed-certificate?WT.mc_id=cloudstories-blog-alehall\">managed by Azure CDN itself<\/a>. HTTP-to-HTTPS redirection is also enforced via <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/cdn\/cdn-standard-rules-engine?WT.mc_id=cloudstories-blog-alehall\">CDN rules<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"externalized-configuration-and-self-bootstrapping\">Externalized configuration and self-bootstrapping<\/h2>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-in\/azure\/key-vault\/general\/overview?WT.mc_id=cloudstories-blog-alehall\">Azure Key Vault<\/a> is used as a secure, external, central key-value store. This helps decouple back-end web API apps from their configuration settings.<\/p>\n\n\n\n<p>The web API apps have <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/key-vault\/general\/managed-identity?WT.mc_id=cloudstories-blog-alehall\">managed identities<\/a>, which are RBAC&#8217;ed for Key Vault access. Also, the web API apps self-bootstrap by reading their configuration settings from the Key Vault at startup. The handshake with the Key Vault is facilitated using the <a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/security\/key-vault-configuration?view=aspnetcore-3.1&amp;WT.mc_id=cloudstories-blog-alehall\">Key Vault Configuration Provider<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/key-vault-config-provider-8.png\" alt=\"code screenshot for key vault config provider\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"queue-based-load-leveling\">Queue-based load leveling<\/h2>\n\n\n\n<p>Even after debouncing calls to the API, the volume of PUT (UPDATE) requests generated by auto-save feature causes the Azure SQL Database&#8217;s <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/sql-database\/sql-database-service-tiers-dtu?WT.mc_id=cloudstories-blog-alehall\">DTU consumption<\/a> to spike, resulting in service degradation. To smooth out this burst of requests, an <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/service-bus-messaging\/service-bus-messaging-overview?WT.mc_id=cloudstories-blog-alehall\">Azure Service Bus<\/a> is used as an intermediate buffer. Instead of writing directly to the database, the web API instead queues up all PUT requests into the service bus to be drained asynchronously later.<\/p>\n\n\n\n<p>An <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-overview?WT.mc_id=cloudstories-blog-alehall\">Azure Function app<\/a> is responsible for serially dequeuing the brokered messages off the service bus, using the <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-bindings-service-bus-trigger?tabs=csharp&amp;WT.mc_id=cloudstories-blog-alehall\">service bus trigger<\/a>. Once the function receives a <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/service-bus-messaging\/service-bus-performance-improvements?tabs=net-standard-sdk#receive-mode&amp;WT.mc_id=cloudstories-blog-alehall\">peek-locked<\/a> message, it commits the PUT (UPDATE) to the Azure SQL database. If the function fails to process any messages, the messages automatically get pushed onto the service bus&#8217;s <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/service-bus-messaging\/service-bus-dead-letter-queues?WT.mc_id=cloudstories-blog-alehall\">dead-letter queue<\/a>. When this happens, an Azure monitor alert is triggered.<\/p>\n\n\n\n<p>The Azure Function app shares the same app service plan as the back-end web APIs, using the <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-functions\/functions-scale#app-service-plan?WT.mc_id=cloudstories-blog-alehall\">dedicated app service plan<\/a> instead of the regular consumption plan. Overall this <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/architecture\/patterns\/queue-based-load-leveling?WT.mc_id=cloudstories-blog-alehall\">queue-based load-leveling pattern<\/a> has helped plateau the database load.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"application-performance-management\">Application performance management<\/h2>\n\n\n\n<p>The <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-monitor\/app\/app-insights-overview?WT.mc_id=cloudstories-blog-alehall\">Application Insights SDK<\/a> is used by the diagram editor (front-end Angular SPA) as an extensible Application Performance Management (APM) to better understand user needs. For example, we&#8217;re interested in tracking the names of icons that the users couldn&#8217;t find in the icon palette (via the icon search box). This helps us add frequently-searched icons in the future.<\/p>\n\n\n\n<p>App Insight&#8217;s <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-monitor\/app\/api-custom-events-metrics?WT.mc_id=cloudstories-blog-alehall\">custom events<\/a> help us log the data and <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/data-explorer\/kusto\/query\/samples?WT.mc_id=cloudstories-blog-alehall\">KQL queries<\/a> are used to mine the aggregated data. The App Insight SDK is also used for <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-monitor\/app\/api-custom-events-metrics#tracktrace&amp;WT.mc_id=cloudstories-blog-alehall\">logging traces<\/a>. The log verbosity is configured via app config (<a href=\"https:\/\/www.cloudskew.com\/about\/cloudskew-architecture.html#externalized-configuration-self-bootstrapping\">externalized config using Azure Key Vault<\/a>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"infrastructure-monitoring\">Infrastructure monitoring<\/h2>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-portal\/azure-portal-dashboards?WT.mc_id=cloudstories-blog-alehall\">Azure Portal Dashboards<\/a> are used to visualize metrics from the various Azure resources deployed by CloudSkew.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-portal-dashboard-9-1024x789.webp\" alt=\"screenshot of azure portal dashboard\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"incident-management\">Incident management<\/h2>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-monitor\/overview\">Azure Monitor&#8217;s<\/a> <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/azure-monitor\/platform\/alerts-metric-overview?WT.mc_id=cloudstories-blog-alehall\">metric-based alerts<\/a> are being used to get incident notifications over email and Slack. Some examples of conditions that trigger alerts:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>[Sev 0] 5xx errors in the web APIs required for printing\/exporting diagrams.<\/li>\n\n\n\n<li>[Sev 1] 5xx errors in other CloudSkew web APIs.<\/li>\n\n\n\n<li>[Sev 1] Any messages in the Service Bus dead-letter queue.<\/li>\n\n\n\n<li>[Sev 2] Response time of web APIs crossing specified thresholds.<\/li>\n\n\n\n<li>[Sev 2] Spikes in DTU consumption in Azure SQL databases.<\/li>\n\n\n\n<li>[Sev 3] Spikes in E2E latency for blob storage requests.<\/li>\n<\/ul>\n\n\n\n<p>Metrics are evaluated and sampled at 15-minute frequency with 1-hour aggregation windows.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-monitor-metric-alerts-10.png\" alt=\"screenshot of azure monitor metric alerts\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><em>Note: Currently, 100% of the incoming metrics are sampled. Over time, as usage grows, we&#8217;ll start filtering out outliers at P99.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"resource-provisioning\">Resource provisioning<\/h2>\n\n\n\n<p><a href=\"https:\/\/www.terraform.io\/docs\/index.html\">Terraform<\/a> scripts are used to provision all of the Azure resources and services shown in the architecture diagram (e.g., storage accounts, app services, CDN, DNS zone, container registry, functions, SLQ server, service bus). Use of Terraform allows us to easily achieve parity in development, test, production environments. Although these three environments are mostly identical clones of each other, there are minor differences:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Across the dev, test, and production environments, the app configuration data stored in the Key Vaults will have the same key names, but different values. This helps apps to bootstrap accordingly.<\/li>\n\n\n\n<li>The dev environments are ephemeral, created on demand and are disposed when not in use.<\/li>\n\n\n\n<li>For cost reasons, smaller resource SKUs are used in dev and test environments. For example, Basic\/B 5 DTUs Azure SQLs in the test environment as compared to Standard\/S0 20 DTU in production.<\/li>\n<\/ul>\n\n\n\n<p><em>Note: The Auth0 tenant has been set up manually since there are no terraform providers for it. However it looks like it might be possible to automate the provisioning using <\/em><a href=\"https:\/\/auth0.com\/docs\/extensions\/deploy-cli\"><em>Auth0&#8217;s Deploy CLI<\/em><\/a><em>. <\/em><\/p>\n\n\n\n<p><em>Note: CloudSkew&#8217;s provisioning script are being migrated from terraform to <\/em><a href=\"https:\/\/www.pulumi.com\/\"><em>pulumi<\/em><\/a> <em>. This article will be updated as soon as the migration is complete.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"continuous-integration\">Continuous integration<\/h2>\n\n\n\n<p>The source code is split across multiple private <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/devops\/repos\/get-started\/what-is-repos?view=azure-devops&amp;WT.mc_id=cloudstories-blog-alehall\">Azure Repos<\/a>. The &#8220;one repository per app&#8221; rule of thumb is applied here. An app is deployed to dev, test, and production prod environments from the same repo.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-repos-multiple-repos-11.png\" alt=\"a screenshot of azure repos\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Feature development and bug fixes happen in private or feature branches, which are ultimately merged into master branches via pull requests.<\/p>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/devops\/pipelines\/get-started\/what-is-azure-pipelines?view=azure-devops&amp;WT.mc_id=cloudstories-blog-alehall\">Azure Pipelines<\/a> are used for continuous integration (CI). Check-ins are built, unit tested, packaged, and deployed to the test environment. CI pipelines are automatically triggered both on pull request creation, as well as check-ins to master branches.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-pipelines-bdt-12.png\" alt=\"azure pipelines screenshot\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>The pipelines are <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/devops\/pipelines\/yaml-schema?view=azure-devops&amp;tabs=schema%2Cparameter-schema&amp;WT.mc_id=cloudstories-blog-alehall\">authored in YAML<\/a> and executed on <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/devops\/pipelines\/agents\/hosted?view=azure-devops&amp;WT.mc_id=cloudstories-blog-alehall\">Microsoft-hosted Ubuntu agents<\/a>.<\/p>\n\n\n\n<p>Azure Pipelines&#8217; <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/devops\/pipelines\/tasks\/?view=azure-devops&amp;WT.mc_id=cloudstories-blog-alehall\">built-in tasks<\/a> are heavily leveraged for deploying changes to Azure app services, functions, storage accounts, container registry, etc. Access to azure resource is authorized via <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/devops\/pipelines\/library\/service-endpoints?view=azure-devops&amp;tabs=yaml&amp;WT.mc_id=cloudstories-blog-alehall\">service connections<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-pipelines-continuous-integration-13.png\" alt=\"azure pipelines continuous integration\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"deployment-and-release\">Deployment and release<\/h2>\n\n\n\n<p>The deployment and release process is very simple (blue-green deployments, canary deployments, and feature flags are not being used). Check-ins that pass the CI process become eligible for release to the production environment.<\/p>\n\n\n\n<p>Azure Pipelines <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/devops\/pipelines\/process\/deployment-jobs?view=azure-devops&amp;WT.mc_id=cloudstories-blog-alehall\">deployment jobs<\/a> are used to target the releases to production environments.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-pipelines-deployment-jobs-14.png\" alt=\"a screen shot of code for azure pipelines deployment jobs\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/devops\/pipelines\/process\/approvals?view=azure-devops&amp;tabs=check-pass&amp;WT.mc_id=cloudstories-blog-alehall\">Manual approvals<\/a> are used to authorize the releases.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2020\/09\/azure-pipelines-manual-approval-15.png\" alt=\"azure pipelines manual approval\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"future-architectural-changes\">Future architectural changes<\/h2>\n\n\n\n<p>As more <a href=\"https:\/\/www.cloudskew.com\/docs\/features.html#planned-features\">features are added<\/a> and usage grows, some architectural enhancements will be evaluated:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>HA with multi-regional deployments and using <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/traffic-manager\/traffic-manager-overview?WT.mc_id=cloudstories-blog-alehall\">Traffic Manager<\/a> for routing traffic.<\/li>\n\n\n\n<li>Move to a higher App Service SKU to avail of slot swapping, horizontal auto-scaling, etc.<\/li>\n\n\n\n<li>Use of caching in the back-end (<a href=\"https:\/\/azure.microsoft.com\/en-in\/services\/cache?WT.mc_id=cloudstories-blog-alehall\">Azure Cache for Redis<\/a>, ASP.NET&#8217;s <a href=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/performance\/caching\/memory?view=aspnetcore-3.1&amp;WT.mc_id=cloudstories-blog-alehall\">IMemoryCache<\/a>).<\/li>\n\n\n\n<li>Changes to the deployment and release model with blue-green deployments and adoption of feature flags.<\/li>\n\n\n\n<li>PowerBI\/Grafana dashboard for tracking business KPIs.<\/li>\n<\/ul>\n\n\n\n<p>Again, any of these enhancements will ultimately be need-driven.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"in-conclusion\">In conclusion<\/h2>\n\n\n\n<p>CloudSkew is in very early stages of development and here are the basic guidelines:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>PaaS\/serverless over IaaS<\/strong>: Pay as-you-go, no server management overhead, which is also why Kubernetes clusters are not in scope yet.<\/li>\n\n\n\n<li><strong>Microservices over monoliths<\/strong>: Individual LEGO blocks can be independently deployed and scaled up or out.<\/li>\n\n\n\n<li><strong>Always keeping the infrastructure stable<\/strong>: Everything infra-related is automated: from provisioning to scaling to monitoring. An &#8220;it just works&#8221; infrastructure helps maintain the core focus on user-facing features.<\/li>\n\n\n\n<li><strong>Frequent releases<\/strong>: The goal is to rapidly go from idea -&gt; development -&gt; deployment -&gt; release. Having ultra-simple CI, deployment, and release processes go a long way to achieving this.<\/li>\n\n\n\n<li><strong>No premature optimization<\/strong>: All changes for making things more &#8220;efficient&#8221; is done just-in-time and must be need-driven. For example, Redis cache is currently not required at the back-end since API response times are within acceptable thresholds.<\/li>\n<\/ul>\n\n\n\n<p>Please <a href=\"mailto:support@cloudskew.com\">email us<\/a> with questions, comments, or suggestions about the project. You can also find a video version of this overview <a href=\"https:\/\/www.youtube.com\/watch?v=d-lIrtaFUe0\">here<\/a>. Happy diagramming!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"follow-mithun-shanbhag-mithunshanbhag-and-on-github\"><em>Follow Mithun Shanbhag <a href=\"https:\/\/twitter.com\/@MithunShanbhag\">@MithunShanbhag<\/a> and on <a href=\"https:\/\/mithunshanbhag.github.io\/\">GitHub<\/a>. <\/em><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>CloudSkew is a free online diagram editor that helps you draw cloud architecture diagrams. CloudSkew diagrams can be securely saved to the cloud and icons for AWS, Microsoft Azure, Google Cloud Platform, Kubernetes, Alibaba Cloud, Oracle Cloud (OCI), and more are included.<\/p>\n","protected":false},"author":5562,"featured_media":95472,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"msxcm_post_with_no_image":false,"ep_exclude_from_search":false,"_classifai_error":"","_classifai_text_to_speech_error":"","footnotes":""},"post_tag":[2271],"content-type":[340],"topic":[2240,2241],"programming-languages":[],"coauthors":[1686],"class_list":["post-82326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-community-partners","content-type-tutorials-and-demos","topic-application-development","topic-cloud","review-flag-1593580428-734","review-flag-1593580771-946","review-flag-1-1593580432-963","review-flag-2-1593580437-411","review-flag-3-1593580442-169","review-flag-5-1593580453-725","review-flag-8-1593580468-572","review-flag-alway-1593580310-39","review-flag-black-1593580405-683","review-flag-free-1593619513-693","review-flag-publi-1593580761-124","review-flag-white-1593580400-904"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CloudSkew makes it easy to sketch cloud architecture diagrams | Microsoft Open Source Blog<\/title>\n<meta name=\"description\" content=\"Built on Azure, CloudSkew is a free diagram editor that helps you draw cloud architecture diagrams, including icons for AWS, GCP, Kubernetes, and many more.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CloudSkew makes it easy to sketch cloud architecture diagrams | Microsoft Open Source Blog\" \/>\n<meta property=\"og:description\" content=\"Built on Azure, CloudSkew is a free diagram editor that helps you draw cloud architecture diagrams, including icons for AWS, GCP, Kubernetes, and many more.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/\" \/>\n<meta property=\"og:site_name\" content=\"Microsoft Open Source Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-10T17:26:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-24T17:49:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23-CloudLifestyle-Portraits-061.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"640\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mithun Shanbhag\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@OpenAtMicrosoft\" \/>\n<meta name=\"twitter:site\" content=\"@OpenAtMicrosoft\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mithun Shanbhag\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 min read\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/\"},\"author\":[{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/author\/mithun-shanbhag\/\",\"@type\":\"Person\",\"@name\":\"Mithun Shanbhag\"}],\"headline\":\"CloudSkew makes it easy to sketch cloud architecture diagrams\",\"datePublished\":\"2020-09-10T17:26:18+00:00\",\"dateModified\":\"2025-06-24T17:49:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/\"},\"wordCount\":2202,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23-CloudLifestyle-Portraits-061.webp\",\"keywords\":[\"Community\/partners\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/\",\"url\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/\",\"name\":\"CloudSkew makes it easy to sketch cloud architecture diagrams | Microsoft Open Source Blog\",\"isPartOf\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23-CloudLifestyle-Portraits-061.webp\",\"datePublished\":\"2020-09-10T17:26:18+00:00\",\"dateModified\":\"2025-06-24T17:49:27+00:00\",\"description\":\"Built on Azure, CloudSkew is a free diagram editor that helps you draw cloud architecture diagrams, including icons for AWS, GCP, Kubernetes, and many more.\",\"breadcrumb\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#primaryimage\",\"url\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23-CloudLifestyle-Portraits-061.webp\",\"contentUrl\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23-CloudLifestyle-Portraits-061.webp\",\"width\":1170,\"height\":640},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/opensource.microsoft.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CloudSkew makes it easy to sketch cloud architecture diagrams\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#website\",\"url\":\"https:\/\/opensource.microsoft.com\/blog\/\",\"name\":\"Microsoft Open Source Blog\",\"description\":\"Open dialogue about openness at Microsoft \u2013 open source, standards, interoperability\",\"publisher\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/opensource.microsoft.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#organization\",\"name\":\"Microsoft Open Source Blog\",\"url\":\"https:\/\/opensource.microsoft.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/08\/Microsoft-Logo.png\",\"contentUrl\":\"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/08\/Microsoft-Logo.png\",\"width\":259,\"height\":194,\"caption\":\"Microsoft Open Source Blog\"},\"image\":{\"@id\":\"https:\/\/opensource.microsoft.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/OpenAtMicrosoft\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CloudSkew makes it easy to sketch cloud architecture diagrams | Microsoft Open Source Blog","description":"Built on Azure, CloudSkew is a free diagram editor that helps you draw cloud architecture diagrams, including icons for AWS, GCP, Kubernetes, and many more.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/","og_locale":"en_US","og_type":"article","og_title":"CloudSkew makes it easy to sketch cloud architecture diagrams | Microsoft Open Source Blog","og_description":"Built on Azure, CloudSkew is a free diagram editor that helps you draw cloud architecture diagrams, including icons for AWS, GCP, Kubernetes, and many more.","og_url":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/","og_site_name":"Microsoft Open Source Blog","article_published_time":"2020-09-10T17:26:18+00:00","article_modified_time":"2025-06-24T17:49:27+00:00","og_image":[{"width":1170,"height":640,"url":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23-CloudLifestyle-Portraits-061.png","type":"image\/png"}],"author":"Mithun Shanbhag","twitter_card":"summary_large_image","twitter_creator":"@OpenAtMicrosoft","twitter_site":"@OpenAtMicrosoft","twitter_misc":{"Written by":"Mithun Shanbhag","Est. reading time":"9 min read"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#article","isPartOf":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/"},"author":[{"@id":"https:\/\/opensource.microsoft.com\/blog\/author\/mithun-shanbhag\/","@type":"Person","@name":"Mithun Shanbhag"}],"headline":"CloudSkew makes it easy to sketch cloud architecture diagrams","datePublished":"2020-09-10T17:26:18+00:00","dateModified":"2025-06-24T17:49:27+00:00","mainEntityOfPage":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/"},"wordCount":2202,"commentCount":0,"publisher":{"@id":"https:\/\/opensource.microsoft.com\/blog\/#organization"},"image":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#primaryimage"},"thumbnailUrl":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23-CloudLifestyle-Portraits-061.webp","keywords":["Community\/partners"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/","url":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/","name":"CloudSkew makes it easy to sketch cloud architecture diagrams | Microsoft Open Source Blog","isPartOf":{"@id":"https:\/\/opensource.microsoft.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#primaryimage"},"image":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#primaryimage"},"thumbnailUrl":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23-CloudLifestyle-Portraits-061.webp","datePublished":"2020-09-10T17:26:18+00:00","dateModified":"2025-06-24T17:49:27+00:00","description":"Built on Azure, CloudSkew is a free diagram editor that helps you draw cloud architecture diagrams, including icons for AWS, GCP, Kubernetes, and many more.","breadcrumb":{"@id":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#primaryimage","url":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23-CloudLifestyle-Portraits-061.webp","contentUrl":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2024\/06\/CLO23-CloudLifestyle-Portraits-061.webp","width":1170,"height":640},{"@type":"BreadcrumbList","@id":"https:\/\/opensource.microsoft.com\/blog\/2020\/09\/10\/cloudskew-sketch-cloud-architecture-diagrams\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/opensource.microsoft.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CloudSkew makes it easy to sketch cloud architecture diagrams"}]},{"@type":"WebSite","@id":"https:\/\/opensource.microsoft.com\/blog\/#website","url":"https:\/\/opensource.microsoft.com\/blog\/","name":"Microsoft Open Source Blog","description":"Open dialogue about openness at Microsoft \u2013 open source, standards, interoperability","publisher":{"@id":"https:\/\/opensource.microsoft.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/opensource.microsoft.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/opensource.microsoft.com\/blog\/#organization","name":"Microsoft Open Source Blog","url":"https:\/\/opensource.microsoft.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/opensource.microsoft.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/08\/Microsoft-Logo.png","contentUrl":"https:\/\/opensource.microsoft.com\/blog\/wp-content\/uploads\/2019\/08\/Microsoft-Logo.png","width":259,"height":194,"caption":"Microsoft Open Source Blog"},"image":{"@id":"https:\/\/opensource.microsoft.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/OpenAtMicrosoft"]}]}},"msxcm_display_generated_audio":false,"msxcm_animated_featured_image":null,"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"Microsoft Open Source Blog","distributor_original_site_url":"https:\/\/opensource.microsoft.com\/blog","push-errors":false,"_links":{"self":[{"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/82326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/users\/5562"}],"replies":[{"embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/comments?post=82326"}],"version-history":[{"count":1,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/82326\/revisions"}],"predecessor-version":[{"id":97645,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/posts\/82326\/revisions\/97645"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/media\/95472"}],"wp:attachment":[{"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/media?parent=82326"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/post_tag?post=82326"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/content-type?post=82326"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/topic?post=82326"},{"taxonomy":"programming-languages","embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/programming-languages?post=82326"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/opensource.microsoft.com\/blog\/wp-json\/wp\/v2\/coauthors?post=82326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}