docs: Add icons to docs (#499)

* Updated docs to include images of nodes

* Updated docs to include images of nodes

* Added icons to docs

* Added black formatting

* Added back png that removed due to incorrect naming convention

* Revert yarn.lock changes

autogen.sh

@@ -56,6 +56,10 @@ done
 echo "generating the docs for custom"
 python -m scripts.generate "custom"
 
+# copy icons across to website
+echo "copying icons to website static folder"
+cp -r resources website/static/img/resources
+
 # run black
 echo "linting the all the diagram modules"
 black "$app_root_dir"/**/*.py

diagrams/saas/chat.py

@@ -12,10 +12,18 @@ class Discord(_Chat):
     _icon = "discord.png"
 
 
+class Line(_Chat):
+    _icon = "line.png"
+
+
 class Mattermost(_Chat):
     _icon = "mattermost.png"
 
 
+class Messenger(_Chat):
+    _icon = "messenger.png"
+
+
 class RocketChat(_Chat):
     _icon = "rocket-chat.png"
 
@@ -32,12 +40,4 @@ class Telegram(_Chat):
     _icon = "telegram.png"
 
 
-class Messenger(_Chat):
-    _icon = "messenger.png"
-
-
-class Line(_Chat):
-    _icon = "line.png"
-
-
 # Aliases

docs/nodes/alibabacloud.md

@@ -7,124 +7,312 @@ Node classes list of alibabacloud provider.
 
 ## alibabacloud.analytics
 
-- **diagrams.alibabacloud.analytics.AnalyticDb**
-- **diagrams.alibabacloud.analytics.ClickHouse**
-- **diagrams.alibabacloud.analytics.DataLakeAnalytics**
-- **diagrams.alibabacloud.analytics.ElaticMapReduce**
-- **diagrams.alibabacloud.analytics.OpenSearch**
+
+<img width="30" src="/img/resources/alibabacloud/analytics/analytic-db.png" alt="AnalyticDb" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.analytics.AnalyticDb**
+
+<img width="30" src="/img/resources/alibabacloud/analytics/click-house.png" alt="ClickHouse" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.analytics.ClickHouse**
+
+<img width="30" src="/img/resources/alibabacloud/analytics/data-lake-analytics.png" alt="DataLakeAnalytics" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.analytics.DataLakeAnalytics**
+
+<img width="30" src="/img/resources/alibabacloud/analytics/elatic-map-reduce.png" alt="ElaticMapReduce" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.analytics.ElaticMapReduce**
+
+<img width="30" src="/img/resources/alibabacloud/analytics/open-search.png" alt="OpenSearch" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.analytics.OpenSearch**
 
 ## alibabacloud.application
 
-- **diagrams.alibabacloud.application.ApiGateway**
-- **diagrams.alibabacloud.application.BeeBot**
-- **diagrams.alibabacloud.application.BlockchainAsAService**
-- **diagrams.alibabacloud.application.CloudCallCenter**
-- **diagrams.alibabacloud.application.CodePipeline**
-- **diagrams.alibabacloud.application.DirectMail**
-- **diagrams.alibabacloud.application.LogService**, **SLS** (alias)
-- **diagrams.alibabacloud.application.MessageNotificationService**, **MNS** (alias)
-- **diagrams.alibabacloud.application.NodeJsPerformancePlatform**
-- **diagrams.alibabacloud.application.OpenSearch**
-- **diagrams.alibabacloud.application.PerformanceTestingService**, **PTS** (alias)
-- **diagrams.alibabacloud.application.RdCloud**
-- **diagrams.alibabacloud.application.SmartConversationAnalysis**, **SCA** (alias)
-- **diagrams.alibabacloud.application.Yida**
+
+<img width="30" src="/img/resources/alibabacloud/application/api-gateway.png" alt="ApiGateway" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.ApiGateway**
+
+<img width="30" src="/img/resources/alibabacloud/application/bee-bot.png" alt="BeeBot" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.BeeBot**
+
+<img width="30" src="/img/resources/alibabacloud/application/blockchain-as-a-service.png" alt="BlockchainAsAService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.BlockchainAsAService**
+
+<img width="30" src="/img/resources/alibabacloud/application/cloud-call-center.png" alt="CloudCallCenter" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.CloudCallCenter**
+
+<img width="30" src="/img/resources/alibabacloud/application/code-pipeline.png" alt="CodePipeline" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.CodePipeline**
+
+<img width="30" src="/img/resources/alibabacloud/application/direct-mail.png" alt="DirectMail" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.DirectMail**
+
+<img width="30" src="/img/resources/alibabacloud/application/log-service.png" alt="LogService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.LogService**, **SLS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/application/message-notification-service.png" alt="MessageNotificationService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.MessageNotificationService**, **MNS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/application/node-js-performance-platform.png" alt="NodeJsPerformancePlatform" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.NodeJsPerformancePlatform**
+
+<img width="30" src="/img/resources/alibabacloud/application/open-search.png" alt="OpenSearch" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.OpenSearch**
+
+<img width="30" src="/img/resources/alibabacloud/application/performance-testing-service.png" alt="PerformanceTestingService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.PerformanceTestingService**, **PTS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/application/rd-cloud.png" alt="RdCloud" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.RdCloud**
+
+<img width="30" src="/img/resources/alibabacloud/application/smart-conversation-analysis.png" alt="SmartConversationAnalysis" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.SmartConversationAnalysis**, **SCA** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/application/yida.png" alt="Yida" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.application.Yida**
 
 ## alibabacloud.communication
 
-- **diagrams.alibabacloud.communication.DirectMail**
-- **diagrams.alibabacloud.communication.MobilePush**
+
+<img width="30" src="/img/resources/alibabacloud/communication/direct-mail.png" alt="DirectMail" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.communication.DirectMail**
+
+<img width="30" src="/img/resources/alibabacloud/communication/mobile-push.png" alt="MobilePush" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.communication.MobilePush**
 
 ## alibabacloud.compute
 
-- **diagrams.alibabacloud.compute.AutoScaling**, **ESS** (alias)
-- **diagrams.alibabacloud.compute.BatchCompute**
-- **diagrams.alibabacloud.compute.ContainerRegistry**
-- **diagrams.alibabacloud.compute.ContainerService**
-- **diagrams.alibabacloud.compute.ElasticComputeService**, **ECS** (alias)
-- **diagrams.alibabacloud.compute.ElasticContainerInstance**, **ECI** (alias)
-- **diagrams.alibabacloud.compute.ElasticHighPerformanceComputing**, **EHPC** (alias)
-- **diagrams.alibabacloud.compute.ElasticSearch**
-- **diagrams.alibabacloud.compute.FunctionCompute**, **FC** (alias)
-- **diagrams.alibabacloud.compute.OperationOrchestrationService**, **OOS** (alias)
-- **diagrams.alibabacloud.compute.ResourceOrchestrationService**, **ROS** (alias)
-- **diagrams.alibabacloud.compute.ServerLoadBalancer**, **SLB** (alias)
-- **diagrams.alibabacloud.compute.ServerlessAppEngine**, **SAE** (alias)
-- **diagrams.alibabacloud.compute.SimpleApplicationServer**, **SAS** (alias)
-- **diagrams.alibabacloud.compute.WebAppService**, **WAS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/auto-scaling.png" alt="AutoScaling" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.AutoScaling**, **ESS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/batch-compute.png" alt="BatchCompute" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.BatchCompute**
+
+<img width="30" src="/img/resources/alibabacloud/compute/container-registry.png" alt="ContainerRegistry" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.ContainerRegistry**
+
+<img width="30" src="/img/resources/alibabacloud/compute/container-service.png" alt="ContainerService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.ContainerService**
+
+<img width="30" src="/img/resources/alibabacloud/compute/elastic-compute-service.png" alt="ElasticComputeService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.ElasticComputeService**, **ECS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/elastic-container-instance.png" alt="ElasticContainerInstance" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.ElasticContainerInstance**, **ECI** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/elastic-high-performance-computing.png" alt="ElasticHighPerformanceComputing" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.ElasticHighPerformanceComputing**, **EHPC** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/elastic-search.png" alt="ElasticSearch" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.ElasticSearch**
+
+<img width="30" src="/img/resources/alibabacloud/compute/function-compute.png" alt="FunctionCompute" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.FunctionCompute**, **FC** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/operation-orchestration-service.png" alt="OperationOrchestrationService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.OperationOrchestrationService**, **OOS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/resource-orchestration-service.png" alt="ResourceOrchestrationService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.ResourceOrchestrationService**, **ROS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/server-load-balancer.png" alt="ServerLoadBalancer" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.ServerLoadBalancer**, **SLB** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/serverless-app-engine.png" alt="ServerlessAppEngine" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.ServerlessAppEngine**, **SAE** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/simple-application-server.png" alt="SimpleApplicationServer" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.SimpleApplicationServer**, **SAS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/compute/web-app-service.png" alt="WebAppService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.compute.WebAppService**, **WAS** (alias)
 
 ## alibabacloud.database
 
-- **diagrams.alibabacloud.database.ApsaradbCassandra**
-- **diagrams.alibabacloud.database.ApsaradbHbase**
-- **diagrams.alibabacloud.database.ApsaradbMemcache**
-- **diagrams.alibabacloud.database.ApsaradbMongodb**
-- **diagrams.alibabacloud.database.ApsaradbOceanbase**
-- **diagrams.alibabacloud.database.ApsaradbPolardb**
-- **diagrams.alibabacloud.database.ApsaradbPostgresql**
-- **diagrams.alibabacloud.database.ApsaradbPpas**
-- **diagrams.alibabacloud.database.ApsaradbRedis**
-- **diagrams.alibabacloud.database.ApsaradbSqlserver**
-- **diagrams.alibabacloud.database.DataManagementService**, **DMS** (alias)
-- **diagrams.alibabacloud.database.DataTransmissionService**, **DTS** (alias)
-- **diagrams.alibabacloud.database.DatabaseBackupService**, **DBS** (alias)
-- **diagrams.alibabacloud.database.DisributeRelationalDatabaseService**, **DRDS** (alias)
-- **diagrams.alibabacloud.database.GraphDatabaseService**, **GDS** (alias)
-- **diagrams.alibabacloud.database.HybriddbForMysql**
-- **diagrams.alibabacloud.database.RelationalDatabaseService**, **RDS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/database/apsaradb-cassandra.png" alt="ApsaradbCassandra" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.ApsaradbCassandra**
+
+<img width="30" src="/img/resources/alibabacloud/database/apsaradb-hbase.png" alt="ApsaradbHbase" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.ApsaradbHbase**
+
+<img width="30" src="/img/resources/alibabacloud/database/apsaradb-memcache.png" alt="ApsaradbMemcache" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.ApsaradbMemcache**
+
+<img width="30" src="/img/resources/alibabacloud/database/apsaradb-mongodb.png" alt="ApsaradbMongodb" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.ApsaradbMongodb**
+
+<img width="30" src="/img/resources/alibabacloud/database/apsaradb-oceanbase.png" alt="ApsaradbOceanbase" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.ApsaradbOceanbase**
+
+<img width="30" src="/img/resources/alibabacloud/database/apsaradb-polardb.png" alt="ApsaradbPolardb" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.ApsaradbPolardb**
+
+<img width="30" src="/img/resources/alibabacloud/database/apsaradb-postgresql.png" alt="ApsaradbPostgresql" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.ApsaradbPostgresql**
+
+<img width="30" src="/img/resources/alibabacloud/database/apsaradb-ppas.png" alt="ApsaradbPpas" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.ApsaradbPpas**
+
+<img width="30" src="/img/resources/alibabacloud/database/apsaradb-redis.png" alt="ApsaradbRedis" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.ApsaradbRedis**
+
+<img width="30" src="/img/resources/alibabacloud/database/apsaradb-sqlserver.png" alt="ApsaradbSqlserver" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.ApsaradbSqlserver**
+
+<img width="30" src="/img/resources/alibabacloud/database/data-management-service.png" alt="DataManagementService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.DataManagementService**, **DMS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/database/data-transmission-service.png" alt="DataTransmissionService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.DataTransmissionService**, **DTS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/database/database-backup-service.png" alt="DatabaseBackupService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.DatabaseBackupService**, **DBS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/database/disribute-relational-database-service.png" alt="DisributeRelationalDatabaseService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.DisributeRelationalDatabaseService**, **DRDS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/database/graph-database-service.png" alt="GraphDatabaseService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.GraphDatabaseService**, **GDS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/database/hybriddb-for-mysql.png" alt="HybriddbForMysql" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.HybriddbForMysql**
+
+<img width="30" src="/img/resources/alibabacloud/database/relational-database-service.png" alt="RelationalDatabaseService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.database.RelationalDatabaseService**, **RDS** (alias)
 
 ## alibabacloud.iot
 
-- **diagrams.alibabacloud.iot.IotInternetDeviceId**
-- **diagrams.alibabacloud.iot.IotLinkWan**
-- **diagrams.alibabacloud.iot.IotMobileConnectionPackage**
-- **diagrams.alibabacloud.iot.IotPlatform**
+
+<img width="30" src="/img/resources/alibabacloud/iot/iot-internet-device-id.png" alt="IotInternetDeviceId" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.iot.IotInternetDeviceId**
+
+<img width="30" src="/img/resources/alibabacloud/iot/iot-link-wan.png" alt="IotLinkWan" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.iot.IotLinkWan**
+
+<img width="30" src="/img/resources/alibabacloud/iot/iot-mobile-connection-package.png" alt="IotMobileConnectionPackage" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.iot.IotMobileConnectionPackage**
+
+<img width="30" src="/img/resources/alibabacloud/iot/iot-platform.png" alt="IotPlatform" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.iot.IotPlatform**
 
 ## alibabacloud.network
 
-- **diagrams.alibabacloud.network.Cdn**
-- **diagrams.alibabacloud.network.CloudEnterpriseNetwork**, **CEN** (alias)
-- **diagrams.alibabacloud.network.ElasticIpAddress**, **EIP** (alias)
-- **diagrams.alibabacloud.network.ExpressConnect**
-- **diagrams.alibabacloud.network.NatGateway**
-- **diagrams.alibabacloud.network.ServerLoadBalancer**, **SLB** (alias)
-- **diagrams.alibabacloud.network.SmartAccessGateway**
-- **diagrams.alibabacloud.network.VirtualPrivateCloud**, **VPC** (alias)
-- **diagrams.alibabacloud.network.VpnGateway**
+
+<img width="30" src="/img/resources/alibabacloud/network/cdn.png" alt="Cdn" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.network.Cdn**
+
+<img width="30" src="/img/resources/alibabacloud/network/cloud-enterprise-network.png" alt="CloudEnterpriseNetwork" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.network.CloudEnterpriseNetwork**, **CEN** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/network/elastic-ip-address.png" alt="ElasticIpAddress" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.network.ElasticIpAddress**, **EIP** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/network/express-connect.png" alt="ExpressConnect" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.network.ExpressConnect**
+
+<img width="30" src="/img/resources/alibabacloud/network/nat-gateway.png" alt="NatGateway" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.network.NatGateway**
+
+<img width="30" src="/img/resources/alibabacloud/network/server-load-balancer.png" alt="ServerLoadBalancer" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.network.ServerLoadBalancer**, **SLB** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/network/smart-access-gateway.png" alt="SmartAccessGateway" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.network.SmartAccessGateway**
+
+<img width="30" src="/img/resources/alibabacloud/network/virtual-private-cloud.png" alt="VirtualPrivateCloud" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.network.VirtualPrivateCloud**, **VPC** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/network/vpn-gateway.png" alt="VpnGateway" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.network.VpnGateway**
 
 ## alibabacloud.security
 
-- **diagrams.alibabacloud.security.AntiBotService**, **ABS** (alias)
-- **diagrams.alibabacloud.security.AntiDdosBasic**
-- **diagrams.alibabacloud.security.AntiDdosPro**
-- **diagrams.alibabacloud.security.AntifraudService**, **AS** (alias)
-- **diagrams.alibabacloud.security.BastionHost**
-- **diagrams.alibabacloud.security.CloudFirewall**, **CFW** (alias)
-- **diagrams.alibabacloud.security.CloudSecurityScanner**
-- **diagrams.alibabacloud.security.ContentModeration**, **CM** (alias)
-- **diagrams.alibabacloud.security.CrowdsourcedSecurityTesting**
-- **diagrams.alibabacloud.security.DataEncryptionService**, **DES** (alias)
-- **diagrams.alibabacloud.security.DbAudit**
-- **diagrams.alibabacloud.security.GameShield**
-- **diagrams.alibabacloud.security.IdVerification**
-- **diagrams.alibabacloud.security.ManagedSecurityService**
-- **diagrams.alibabacloud.security.SecurityCenter**
-- **diagrams.alibabacloud.security.ServerGuard**
-- **diagrams.alibabacloud.security.SslCertificates**
-- **diagrams.alibabacloud.security.WebApplicationFirewall**, **WAF** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/security/anti-bot-service.png" alt="AntiBotService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.AntiBotService**, **ABS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/security/anti-ddos-basic.png" alt="AntiDdosBasic" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.AntiDdosBasic**
+
+<img width="30" src="/img/resources/alibabacloud/security/anti-ddos-pro.png" alt="AntiDdosPro" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.AntiDdosPro**
+
+<img width="30" src="/img/resources/alibabacloud/security/antifraud-service.png" alt="AntifraudService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.AntifraudService**, **AS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/security/bastion-host.png" alt="BastionHost" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.BastionHost**
+
+<img width="30" src="/img/resources/alibabacloud/security/cloud-firewall.png" alt="CloudFirewall" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.CloudFirewall**, **CFW** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/security/cloud-security-scanner.png" alt="CloudSecurityScanner" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.CloudSecurityScanner**
+
+<img width="30" src="/img/resources/alibabacloud/security/content-moderation.png" alt="ContentModeration" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.ContentModeration**, **CM** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/security/crowdsourced-security-testing.png" alt="CrowdsourcedSecurityTesting" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.CrowdsourcedSecurityTesting**
+
+<img width="30" src="/img/resources/alibabacloud/security/data-encryption-service.png" alt="DataEncryptionService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.DataEncryptionService**, **DES** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/security/db-audit.png" alt="DbAudit" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.DbAudit**
+
+<img width="30" src="/img/resources/alibabacloud/security/game-shield.png" alt="GameShield" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.GameShield**
+
+<img width="30" src="/img/resources/alibabacloud/security/id-verification.png" alt="IdVerification" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.IdVerification**
+
+<img width="30" src="/img/resources/alibabacloud/security/managed-security-service.png" alt="ManagedSecurityService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.ManagedSecurityService**
+
+<img width="30" src="/img/resources/alibabacloud/security/security-center.png" alt="SecurityCenter" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.SecurityCenter**
+
+<img width="30" src="/img/resources/alibabacloud/security/server-guard.png" alt="ServerGuard" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.ServerGuard**
+
+<img width="30" src="/img/resources/alibabacloud/security/ssl-certificates.png" alt="SslCertificates" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.SslCertificates**
+
+<img width="30" src="/img/resources/alibabacloud/security/web-application-firewall.png" alt="WebApplicationFirewall" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.security.WebApplicationFirewall**, **WAF** (alias)
 
 ## alibabacloud.storage
 
-- **diagrams.alibabacloud.storage.CloudStorageGateway**
-- **diagrams.alibabacloud.storage.FileStorageHdfs**, **HDFS** (alias)
-- **diagrams.alibabacloud.storage.FileStorageNas**, **NAS** (alias)
-- **diagrams.alibabacloud.storage.HybridBackupRecovery**, **HBR** (alias)
-- **diagrams.alibabacloud.storage.HybridCloudDisasterRecovery**, **HDR** (alias)
-- **diagrams.alibabacloud.storage.Imm**
-- **diagrams.alibabacloud.storage.ObjectStorageService**, **OSS** (alias)
-- **diagrams.alibabacloud.storage.ObjectTableStore**, **OTS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/storage/cloud-storage-gateway.png" alt="CloudStorageGateway" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.storage.CloudStorageGateway**
+
+<img width="30" src="/img/resources/alibabacloud/storage/file-storage-hdfs.png" alt="FileStorageHdfs" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.storage.FileStorageHdfs**, **HDFS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/storage/file-storage-nas.png" alt="FileStorageNas" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.storage.FileStorageNas**, **NAS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/storage/hybrid-backup-recovery.png" alt="HybridBackupRecovery" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.storage.HybridBackupRecovery**, **HBR** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/storage/hybrid-cloud-disaster-recovery.png" alt="HybridCloudDisasterRecovery" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.storage.HybridCloudDisasterRecovery**, **HDR** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/storage/imm.png" alt="Imm" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.storage.Imm**
+
+<img width="30" src="/img/resources/alibabacloud/storage/object-storage-service.png" alt="ObjectStorageService" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.storage.ObjectStorageService**, **OSS** (alias)
+
+<img width="30" src="/img/resources/alibabacloud/storage/object-table-store.png" alt="ObjectTableStore" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.storage.ObjectTableStore**, **OTS** (alias)
 
 ## alibabacloud.web
 
-- **diagrams.alibabacloud.web.Dns**
-- **diagrams.alibabacloud.web.Domain**
+
+<img width="30" src="/img/resources/alibabacloud/web/dns.png" alt="Dns" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.web.Dns**
+
+<img width="30" src="/img/resources/alibabacloud/web/domain.png" alt="Domain" style="float: left; padding-right: 5px;" >
+**diagrams.alibabacloud.web.Domain**

docs/nodes/azure.md

@@ -7,266 +7,708 @@ Node classes list of azure provider.
 
 ## azure.analytics
 
-- **diagrams.azure.analytics.AnalysisServices**
-- **diagrams.azure.analytics.DataExplorerClusters**
-- **diagrams.azure.analytics.DataFactories**
-- **diagrams.azure.analytics.DataLakeAnalytics**
-- **diagrams.azure.analytics.DataLakeStoreGen1**
-- **diagrams.azure.analytics.Databricks**
-- **diagrams.azure.analytics.EventHubClusters**
-- **diagrams.azure.analytics.EventHubs**
-- **diagrams.azure.analytics.Hdinsightclusters**
-- **diagrams.azure.analytics.LogAnalyticsWorkspaces**
-- **diagrams.azure.analytics.StreamAnalyticsJobs**
-- **diagrams.azure.analytics.SynapseAnalytics**
+
+<img width="30" src="/img/resources/azure/analytics/analysis-services.png" alt="AnalysisServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.AnalysisServices**
+
+<img width="30" src="/img/resources/azure/analytics/data-explorer-clusters.png" alt="DataExplorerClusters" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.DataExplorerClusters**
+
+<img width="30" src="/img/resources/azure/analytics/data-factories.png" alt="DataFactories" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.DataFactories**
+
+<img width="30" src="/img/resources/azure/analytics/data-lake-analytics.png" alt="DataLakeAnalytics" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.DataLakeAnalytics**
+
+<img width="30" src="/img/resources/azure/analytics/data-lake-store-gen1.png" alt="DataLakeStoreGen1" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.DataLakeStoreGen1**
+
+<img width="30" src="/img/resources/azure/analytics/databricks.png" alt="Databricks" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.Databricks**
+
+<img width="30" src="/img/resources/azure/analytics/event-hub-clusters.png" alt="EventHubClusters" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.EventHubClusters**
+
+<img width="30" src="/img/resources/azure/analytics/event-hubs.png" alt="EventHubs" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.EventHubs**
+
+<img width="30" src="/img/resources/azure/analytics/hdinsightclusters.png" alt="Hdinsightclusters" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.Hdinsightclusters**
+
+<img width="30" src="/img/resources/azure/analytics/log-analytics-workspaces.png" alt="LogAnalyticsWorkspaces" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.LogAnalyticsWorkspaces**
+
+<img width="30" src="/img/resources/azure/analytics/stream-analytics-jobs.png" alt="StreamAnalyticsJobs" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.StreamAnalyticsJobs**
+
+<img width="30" src="/img/resources/azure/analytics/synapse-analytics.png" alt="SynapseAnalytics" style="float: left; padding-right: 5px;" >
+**diagrams.azure.analytics.SynapseAnalytics**
 
 ## azure.compute
 
-- **diagrams.azure.compute.AppServices**
-- **diagrams.azure.compute.AutomanagedVM**
-- **diagrams.azure.compute.AvailabilitySets**
-- **diagrams.azure.compute.BatchAccounts**
-- **diagrams.azure.compute.CitrixVirtualDesktopsEssentials**
-- **diagrams.azure.compute.CloudServicesClassic**
-- **diagrams.azure.compute.CloudServices**
-- **diagrams.azure.compute.CloudsimpleVirtualMachines**
-- **diagrams.azure.compute.ContainerInstances**
-- **diagrams.azure.compute.ContainerRegistries**, **ACR** (alias)
-- **diagrams.azure.compute.DiskEncryptionSets**
-- **diagrams.azure.compute.DiskSnapshots**
-- **diagrams.azure.compute.Disks**
-- **diagrams.azure.compute.FunctionApps**
-- **diagrams.azure.compute.ImageDefinitions**
-- **diagrams.azure.compute.ImageVersions**
-- **diagrams.azure.compute.KubernetesServices**, **AKS** (alias)
-- **diagrams.azure.compute.MeshApplications**
-- **diagrams.azure.compute.OsImages**
-- **diagrams.azure.compute.SAPHANAOnAzure**
-- **diagrams.azure.compute.ServiceFabricClusters**
-- **diagrams.azure.compute.SharedImageGalleries**
-- **diagrams.azure.compute.SpringCloud**
-- **diagrams.azure.compute.VMClassic**
-- **diagrams.azure.compute.VMImages**
-- **diagrams.azure.compute.VMLinux**
-- **diagrams.azure.compute.VMScaleSet**, **VMSS** (alias)
-- **diagrams.azure.compute.VMWindows**
-- **diagrams.azure.compute.VM**
-- **diagrams.azure.compute.Workspaces**
+
+<img width="30" src="/img/resources/azure/compute/app-services.png" alt="AppServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.AppServices**
+
+<img width="30" src="/img/resources/azure/compute/automanaged-vm.png" alt="AutomanagedVM" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.AutomanagedVM**
+
+<img width="30" src="/img/resources/azure/compute/availability-sets.png" alt="AvailabilitySets" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.AvailabilitySets**
+
+<img width="30" src="/img/resources/azure/compute/batch-accounts.png" alt="BatchAccounts" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.BatchAccounts**
+
+<img width="30" src="/img/resources/azure/compute/citrix-virtual-desktops-essentials.png" alt="CitrixVirtualDesktopsEssentials" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.CitrixVirtualDesktopsEssentials**
+
+<img width="30" src="/img/resources/azure/compute/cloud-services-classic.png" alt="CloudServicesClassic" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.CloudServicesClassic**
+
+<img width="30" src="/img/resources/azure/compute/cloud-services.png" alt="CloudServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.CloudServices**
+
+<img width="30" src="/img/resources/azure/compute/cloudsimple-virtual-machines.png" alt="CloudsimpleVirtualMachines" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.CloudsimpleVirtualMachines**
+
+<img width="30" src="/img/resources/azure/compute/container-instances.png" alt="ContainerInstances" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.ContainerInstances**
+
+<img width="30" src="/img/resources/azure/compute/container-registries.png" alt="ContainerRegistries" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.ContainerRegistries**, **ACR** (alias)
+
+<img width="30" src="/img/resources/azure/compute/disk-encryption-sets.png" alt="DiskEncryptionSets" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.DiskEncryptionSets**
+
+<img width="30" src="/img/resources/azure/compute/disk-snapshots.png" alt="DiskSnapshots" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.DiskSnapshots**
+
+<img width="30" src="/img/resources/azure/compute/disks.png" alt="Disks" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.Disks**
+
+<img width="30" src="/img/resources/azure/compute/function-apps.png" alt="FunctionApps" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.FunctionApps**
+
+<img width="30" src="/img/resources/azure/compute/image-definitions.png" alt="ImageDefinitions" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.ImageDefinitions**
+
+<img width="30" src="/img/resources/azure/compute/image-versions.png" alt="ImageVersions" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.ImageVersions**
+
+<img width="30" src="/img/resources/azure/compute/kubernetes-services.png" alt="KubernetesServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.KubernetesServices**, **AKS** (alias)
+
+<img width="30" src="/img/resources/azure/compute/mesh-applications.png" alt="MeshApplications" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.MeshApplications**
+
+<img width="30" src="/img/resources/azure/compute/os-images.png" alt="OsImages" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.OsImages**
+
+<img width="30" src="/img/resources/azure/compute/sap-hana-on-azure.png" alt="SAPHANAOnAzure" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.SAPHANAOnAzure**
+
+<img width="30" src="/img/resources/azure/compute/service-fabric-clusters.png" alt="ServiceFabricClusters" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.ServiceFabricClusters**
+
+<img width="30" src="/img/resources/azure/compute/shared-image-galleries.png" alt="SharedImageGalleries" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.SharedImageGalleries**
+
+<img width="30" src="/img/resources/azure/compute/spring-cloud.png" alt="SpringCloud" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.SpringCloud**
+
+<img width="30" src="/img/resources/azure/compute/vm-classic.png" alt="VMClassic" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.VMClassic**
+
+<img width="30" src="/img/resources/azure/compute/vm-images.png" alt="VMImages" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.VMImages**
+
+<img width="30" src="/img/resources/azure/compute/vm-linux.png" alt="VMLinux" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.VMLinux**
+
+<img width="30" src="/img/resources/azure/compute/vm-scale-set.png" alt="VMScaleSet" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.VMScaleSet**, **VMSS** (alias)
+
+<img width="30" src="/img/resources/azure/compute/vm-windows.png" alt="VMWindows" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.VMWindows**
+
+<img width="30" src="/img/resources/azure/compute/vm.png" alt="VM" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.VM**
+
+<img width="30" src="/img/resources/azure/compute/workspaces.png" alt="Workspaces" style="float: left; padding-right: 5px;" >
+**diagrams.azure.compute.Workspaces**
 
 ## azure.database
 
-- **diagrams.azure.database.BlobStorage**
-- **diagrams.azure.database.CacheForRedis**
-- **diagrams.azure.database.CosmosDb**
-- **diagrams.azure.database.DataExplorerClusters**
-- **diagrams.azure.database.DataFactory**
-- **diagrams.azure.database.DataLake**
-- **diagrams.azure.database.DatabaseForMariadbServers**
-- **diagrams.azure.database.DatabaseForMysqlServers**
-- **diagrams.azure.database.DatabaseForPostgresqlServers**
-- **diagrams.azure.database.ElasticDatabasePools**
-- **diagrams.azure.database.ElasticJobAgents**
-- **diagrams.azure.database.InstancePools**
-- **diagrams.azure.database.ManagedDatabases**
-- **diagrams.azure.database.SQLDatabases**
-- **diagrams.azure.database.SQLDatawarehouse**
-- **diagrams.azure.database.SQLManagedInstances**
-- **diagrams.azure.database.SQLServerStretchDatabases**
-- **diagrams.azure.database.SQLServers**
-- **diagrams.azure.database.SQLVM**
-- **diagrams.azure.database.SQL**
-- **diagrams.azure.database.SsisLiftAndShiftIr**
-- **diagrams.azure.database.SynapseAnalytics**
-- **diagrams.azure.database.VirtualClusters**
-- **diagrams.azure.database.VirtualDatacenter**
+
+<img width="30" src="/img/resources/azure/database/blob-storage.png" alt="BlobStorage" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.BlobStorage**
+
+<img width="30" src="/img/resources/azure/database/cache-for-redis.png" alt="CacheForRedis" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.CacheForRedis**
+
+<img width="30" src="/img/resources/azure/database/cosmos-db.png" alt="CosmosDb" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.CosmosDb**
+
+<img width="30" src="/img/resources/azure/database/data-explorer-clusters.png" alt="DataExplorerClusters" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.DataExplorerClusters**
+
+<img width="30" src="/img/resources/azure/database/data-factory.png" alt="DataFactory" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.DataFactory**
+
+<img width="30" src="/img/resources/azure/database/data-lake.png" alt="DataLake" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.DataLake**
+
+<img width="30" src="/img/resources/azure/database/database-for-mariadb-servers.png" alt="DatabaseForMariadbServers" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.DatabaseForMariadbServers**
+
+<img width="30" src="/img/resources/azure/database/database-for-mysql-servers.png" alt="DatabaseForMysqlServers" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.DatabaseForMysqlServers**
+
+<img width="30" src="/img/resources/azure/database/database-for-postgresql-servers.png" alt="DatabaseForPostgresqlServers" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.DatabaseForPostgresqlServers**
+
+<img width="30" src="/img/resources/azure/database/elastic-database-pools.png" alt="ElasticDatabasePools" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.ElasticDatabasePools**
+
+<img width="30" src="/img/resources/azure/database/elastic-job-agents.png" alt="ElasticJobAgents" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.ElasticJobAgents**
+
+<img width="30" src="/img/resources/azure/database/instance-pools.png" alt="InstancePools" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.InstancePools**
+
+<img width="30" src="/img/resources/azure/database/managed-databases.png" alt="ManagedDatabases" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.ManagedDatabases**
+
+<img width="30" src="/img/resources/azure/database/sql-databases.png" alt="SQLDatabases" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.SQLDatabases**
+
+<img width="30" src="/img/resources/azure/database/sql-datawarehouse.png" alt="SQLDatawarehouse" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.SQLDatawarehouse**
+
+<img width="30" src="/img/resources/azure/database/sql-managed-instances.png" alt="SQLManagedInstances" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.SQLManagedInstances**
+
+<img width="30" src="/img/resources/azure/database/sql-server-stretch-databases.png" alt="SQLServerStretchDatabases" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.SQLServerStretchDatabases**
+
+<img width="30" src="/img/resources/azure/database/sql-servers.png" alt="SQLServers" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.SQLServers**
+
+<img width="30" src="/img/resources/azure/database/sql-vm.png" alt="SQLVM" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.SQLVM**
+
+<img width="30" src="/img/resources/azure/database/sql.png" alt="SQL" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.SQL**
+
+<img width="30" src="/img/resources/azure/database/ssis-lift-and-shift-ir.png" alt="SsisLiftAndShiftIr" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.SsisLiftAndShiftIr**
+
+<img width="30" src="/img/resources/azure/database/synapse-analytics.png" alt="SynapseAnalytics" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.SynapseAnalytics**
+
+<img width="30" src="/img/resources/azure/database/virtual-clusters.png" alt="VirtualClusters" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.VirtualClusters**
+
+<img width="30" src="/img/resources/azure/database/virtual-datacenter.png" alt="VirtualDatacenter" style="float: left; padding-right: 5px;" >
+**diagrams.azure.database.VirtualDatacenter**
 
 ## azure.devops
 
-- **diagrams.azure.devops.ApplicationInsights**
-- **diagrams.azure.devops.Artifacts**
-- **diagrams.azure.devops.Boards**
-- **diagrams.azure.devops.Devops**
-- **diagrams.azure.devops.DevtestLabs**
-- **diagrams.azure.devops.LabServices**
-- **diagrams.azure.devops.Pipelines**
-- **diagrams.azure.devops.Repos**
-- **diagrams.azure.devops.TestPlans**
+
+<img width="30" src="/img/resources/azure/devops/application-insights.png" alt="ApplicationInsights" style="float: left; padding-right: 5px;" >
+**diagrams.azure.devops.ApplicationInsights**
+
+<img width="30" src="/img/resources/azure/devops/artifacts.png" alt="Artifacts" style="float: left; padding-right: 5px;" >
+**diagrams.azure.devops.Artifacts**
+
+<img width="30" src="/img/resources/azure/devops/boards.png" alt="Boards" style="float: left; padding-right: 5px;" >
+**diagrams.azure.devops.Boards**
+
+<img width="30" src="/img/resources/azure/devops/devops.png" alt="Devops" style="float: left; padding-right: 5px;" >
+**diagrams.azure.devops.Devops**
+
+<img width="30" src="/img/resources/azure/devops/devtest-labs.png" alt="DevtestLabs" style="float: left; padding-right: 5px;" >
+**diagrams.azure.devops.DevtestLabs**
+
+<img width="30" src="/img/resources/azure/devops/lab-services.png" alt="LabServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.devops.LabServices**
+
+<img width="30" src="/img/resources/azure/devops/pipelines.png" alt="Pipelines" style="float: left; padding-right: 5px;" >
+**diagrams.azure.devops.Pipelines**
+
+<img width="30" src="/img/resources/azure/devops/repos.png" alt="Repos" style="float: left; padding-right: 5px;" >
+**diagrams.azure.devops.Repos**
+
+<img width="30" src="/img/resources/azure/devops/test-plans.png" alt="TestPlans" style="float: left; padding-right: 5px;" >
+**diagrams.azure.devops.TestPlans**
 
 ## azure.general
 
-- **diagrams.azure.general.Allresources**
-- **diagrams.azure.general.Azurehome**
-- **diagrams.azure.general.Developertools**
-- **diagrams.azure.general.Helpsupport**
-- **diagrams.azure.general.Information**
-- **diagrams.azure.general.Managementgroups**
-- **diagrams.azure.general.Marketplace**
-- **diagrams.azure.general.Quickstartcenter**
-- **diagrams.azure.general.Recent**
-- **diagrams.azure.general.Reservations**
-- **diagrams.azure.general.Resource**
-- **diagrams.azure.general.Resourcegroups**
-- **diagrams.azure.general.Servicehealth**
-- **diagrams.azure.general.Shareddashboard**
-- **diagrams.azure.general.Subscriptions**
-- **diagrams.azure.general.Support**
-- **diagrams.azure.general.Supportrequests**
-- **diagrams.azure.general.Tag**
-- **diagrams.azure.general.Tags**
-- **diagrams.azure.general.Templates**
-- **diagrams.azure.general.Twousericon**
-- **diagrams.azure.general.Userhealthicon**
-- **diagrams.azure.general.Usericon**
-- **diagrams.azure.general.Userprivacy**
-- **diagrams.azure.general.Userresource**
-- **diagrams.azure.general.Whatsnew**
+
+<img width="30" src="/img/resources/azure/general/allresources.png" alt="Allresources" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Allresources**
+
+<img width="30" src="/img/resources/azure/general/azurehome.png" alt="Azurehome" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Azurehome**
+
+<img width="30" src="/img/resources/azure/general/developertools.png" alt="Developertools" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Developertools**
+
+<img width="30" src="/img/resources/azure/general/helpsupport.png" alt="Helpsupport" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Helpsupport**
+
+<img width="30" src="/img/resources/azure/general/information.png" alt="Information" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Information**
+
+<img width="30" src="/img/resources/azure/general/managementgroups.png" alt="Managementgroups" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Managementgroups**
+
+<img width="30" src="/img/resources/azure/general/marketplace.png" alt="Marketplace" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Marketplace**
+
+<img width="30" src="/img/resources/azure/general/quickstartcenter.png" alt="Quickstartcenter" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Quickstartcenter**
+
+<img width="30" src="/img/resources/azure/general/recent.png" alt="Recent" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Recent**
+
+<img width="30" src="/img/resources/azure/general/reservations.png" alt="Reservations" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Reservations**
+
+<img width="30" src="/img/resources/azure/general/resource.png" alt="Resource" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Resource**
+
+<img width="30" src="/img/resources/azure/general/resourcegroups.png" alt="Resourcegroups" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Resourcegroups**
+
+<img width="30" src="/img/resources/azure/general/servicehealth.png" alt="Servicehealth" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Servicehealth**
+
+<img width="30" src="/img/resources/azure/general/shareddashboard.png" alt="Shareddashboard" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Shareddashboard**
+
+<img width="30" src="/img/resources/azure/general/subscriptions.png" alt="Subscriptions" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Subscriptions**
+
+<img width="30" src="/img/resources/azure/general/support.png" alt="Support" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Support**
+
+<img width="30" src="/img/resources/azure/general/supportrequests.png" alt="Supportrequests" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Supportrequests**
+
+<img width="30" src="/img/resources/azure/general/tag.png" alt="Tag" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Tag**
+
+<img width="30" src="/img/resources/azure/general/tags.png" alt="Tags" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Tags**
+
+<img width="30" src="/img/resources/azure/general/templates.png" alt="Templates" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Templates**
+
+<img width="30" src="/img/resources/azure/general/twousericon.png" alt="Twousericon" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Twousericon**
+
+<img width="30" src="/img/resources/azure/general/userhealthicon.png" alt="Userhealthicon" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Userhealthicon**
+
+<img width="30" src="/img/resources/azure/general/usericon.png" alt="Usericon" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Usericon**
+
+<img width="30" src="/img/resources/azure/general/userprivacy.png" alt="Userprivacy" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Userprivacy**
+
+<img width="30" src="/img/resources/azure/general/userresource.png" alt="Userresource" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Userresource**
+
+<img width="30" src="/img/resources/azure/general/whatsnew.png" alt="Whatsnew" style="float: left; padding-right: 5px;" >
+**diagrams.azure.general.Whatsnew**
 
 ## azure.identity
 
-- **diagrams.azure.identity.AccessReview**
-- **diagrams.azure.identity.ActiveDirectoryConnectHealth**
-- **diagrams.azure.identity.ActiveDirectory**
-- **diagrams.azure.identity.ADB2C**
-- **diagrams.azure.identity.ADDomainServices**
-- **diagrams.azure.identity.ADIdentityProtection**
-- **diagrams.azure.identity.ADPrivilegedIdentityManagement**
-- **diagrams.azure.identity.AppRegistrations**
-- **diagrams.azure.identity.ConditionalAccess**
-- **diagrams.azure.identity.EnterpriseApplications**
-- **diagrams.azure.identity.Groups**
-- **diagrams.azure.identity.IdentityGovernance**
-- **diagrams.azure.identity.InformationProtection**
-- **diagrams.azure.identity.ManagedIdentities**
-- **diagrams.azure.identity.Users**
+
+<img width="30" src="/img/resources/azure/identity/access-review.png" alt="AccessReview" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.AccessReview**
+
+<img width="30" src="/img/resources/azure/identity/active-directory-connect-health.png" alt="ActiveDirectoryConnectHealth" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.ActiveDirectoryConnectHealth**
+
+<img width="30" src="/img/resources/azure/identity/active-directory.png" alt="ActiveDirectory" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.ActiveDirectory**
+
+<img width="30" src="/img/resources/azure/identity/ad-b2c.png" alt="ADB2C" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.ADB2C**
+
+<img width="30" src="/img/resources/azure/identity/ad-domain-services.png" alt="ADDomainServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.ADDomainServices**
+
+<img width="30" src="/img/resources/azure/identity/ad-identity-protection.png" alt="ADIdentityProtection" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.ADIdentityProtection**
+
+<img width="30" src="/img/resources/azure/identity/ad-privileged-identity-management.png" alt="ADPrivilegedIdentityManagement" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.ADPrivilegedIdentityManagement**
+
+<img width="30" src="/img/resources/azure/identity/app-registrations.png" alt="AppRegistrations" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.AppRegistrations**
+
+<img width="30" src="/img/resources/azure/identity/conditional-access.png" alt="ConditionalAccess" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.ConditionalAccess**
+
+<img width="30" src="/img/resources/azure/identity/enterprise-applications.png" alt="EnterpriseApplications" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.EnterpriseApplications**
+
+<img width="30" src="/img/resources/azure/identity/groups.png" alt="Groups" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.Groups**
+
+<img width="30" src="/img/resources/azure/identity/identity-governance.png" alt="IdentityGovernance" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.IdentityGovernance**
+
+<img width="30" src="/img/resources/azure/identity/information-protection.png" alt="InformationProtection" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.InformationProtection**
+
+<img width="30" src="/img/resources/azure/identity/managed-identities.png" alt="ManagedIdentities" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.ManagedIdentities**
+
+<img width="30" src="/img/resources/azure/identity/users.png" alt="Users" style="float: left; padding-right: 5px;" >
+**diagrams.azure.identity.Users**
 
 ## azure.integration
 
-- **diagrams.azure.integration.APIForFhir**
-- **diagrams.azure.integration.APIManagement**
-- **diagrams.azure.integration.AppConfiguration**
-- **diagrams.azure.integration.DataCatalog**
-- **diagrams.azure.integration.EventGridDomains**
-- **diagrams.azure.integration.EventGridSubscriptions**
-- **diagrams.azure.integration.EventGridTopics**
-- **diagrams.azure.integration.IntegrationAccounts**
-- **diagrams.azure.integration.IntegrationServiceEnvironments**
-- **diagrams.azure.integration.LogicAppsCustomConnector**
-- **diagrams.azure.integration.LogicApps**
-- **diagrams.azure.integration.PartnerTopic**
-- **diagrams.azure.integration.SendgridAccounts**
-- **diagrams.azure.integration.ServiceBusRelays**
-- **diagrams.azure.integration.ServiceBus**
-- **diagrams.azure.integration.ServiceCatalogManagedApplicationDefinitions**
-- **diagrams.azure.integration.SoftwareAsAService**
-- **diagrams.azure.integration.StorsimpleDeviceManagers**
-- **diagrams.azure.integration.SystemTopic**
+
+<img width="30" src="/img/resources/azure/integration/api-for-fhir.png" alt="APIForFhir" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.APIForFhir**
+
+<img width="30" src="/img/resources/azure/integration/api-management.png" alt="APIManagement" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.APIManagement**
+
+<img width="30" src="/img/resources/azure/integration/app-configuration.png" alt="AppConfiguration" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.AppConfiguration**
+
+<img width="30" src="/img/resources/azure/integration/data-catalog.png" alt="DataCatalog" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.DataCatalog**
+
+<img width="30" src="/img/resources/azure/integration/event-grid-domains.png" alt="EventGridDomains" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.EventGridDomains**
+
+<img width="30" src="/img/resources/azure/integration/event-grid-subscriptions.png" alt="EventGridSubscriptions" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.EventGridSubscriptions**
+
+<img width="30" src="/img/resources/azure/integration/event-grid-topics.png" alt="EventGridTopics" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.EventGridTopics**
+
+<img width="30" src="/img/resources/azure/integration/integration-accounts.png" alt="IntegrationAccounts" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.IntegrationAccounts**
+
+<img width="30" src="/img/resources/azure/integration/integration-service-environments.png" alt="IntegrationServiceEnvironments" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.IntegrationServiceEnvironments**
+
+<img width="30" src="/img/resources/azure/integration/logic-apps-custom-connector.png" alt="LogicAppsCustomConnector" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.LogicAppsCustomConnector**
+
+<img width="30" src="/img/resources/azure/integration/logic-apps.png" alt="LogicApps" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.LogicApps**
+
+<img width="30" src="/img/resources/azure/integration/partner-topic.png" alt="PartnerTopic" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.PartnerTopic**
+
+<img width="30" src="/img/resources/azure/integration/sendgrid-accounts.png" alt="SendgridAccounts" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.SendgridAccounts**
+
+<img width="30" src="/img/resources/azure/integration/service-bus-relays.png" alt="ServiceBusRelays" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.ServiceBusRelays**
+
+<img width="30" src="/img/resources/azure/integration/service-bus.png" alt="ServiceBus" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.ServiceBus**
+
+<img width="30" src="/img/resources/azure/integration/service-catalog-managed-application-definitions.png" alt="ServiceCatalogManagedApplicationDefinitions" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.ServiceCatalogManagedApplicationDefinitions**
+
+<img width="30" src="/img/resources/azure/integration/software-as-a-service.png" alt="SoftwareAsAService" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.SoftwareAsAService**
+
+<img width="30" src="/img/resources/azure/integration/storsimple-device-managers.png" alt="StorsimpleDeviceManagers" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.StorsimpleDeviceManagers**
+
+<img width="30" src="/img/resources/azure/integration/system-topic.png" alt="SystemTopic" style="float: left; padding-right: 5px;" >
+**diagrams.azure.integration.SystemTopic**
 
 ## azure.iot
 
-- **diagrams.azure.iot.DeviceProvisioningServices**
-- **diagrams.azure.iot.DigitalTwins**
-- **diagrams.azure.iot.IotCentralApplications**
-- **diagrams.azure.iot.IotHubSecurity**
-- **diagrams.azure.iot.IotHub**
-- **diagrams.azure.iot.Maps**
-- **diagrams.azure.iot.Sphere**
-- **diagrams.azure.iot.TimeSeriesInsightsEnvironments**
-- **diagrams.azure.iot.TimeSeriesInsightsEventsSources**
-- **diagrams.azure.iot.Windows10IotCoreServices**
+
+<img width="30" src="/img/resources/azure/iot/device-provisioning-services.png" alt="DeviceProvisioningServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.iot.DeviceProvisioningServices**
+
+<img width="30" src="/img/resources/azure/iot/digital-twins.png" alt="DigitalTwins" style="float: left; padding-right: 5px;" >
+**diagrams.azure.iot.DigitalTwins**
+
+<img width="30" src="/img/resources/azure/iot/iot-central-applications.png" alt="IotCentralApplications" style="float: left; padding-right: 5px;" >
+**diagrams.azure.iot.IotCentralApplications**
+
+<img width="30" src="/img/resources/azure/iot/iot-hub-security.png" alt="IotHubSecurity" style="float: left; padding-right: 5px;" >
+**diagrams.azure.iot.IotHubSecurity**
+
+<img width="30" src="/img/resources/azure/iot/iot-hub.png" alt="IotHub" style="float: left; padding-right: 5px;" >
+**diagrams.azure.iot.IotHub**
+
+<img width="30" src="/img/resources/azure/iot/maps.png" alt="Maps" style="float: left; padding-right: 5px;" >
+**diagrams.azure.iot.Maps**
+
+<img width="30" src="/img/resources/azure/iot/sphere.png" alt="Sphere" style="float: left; padding-right: 5px;" >
+**diagrams.azure.iot.Sphere**
+
+<img width="30" src="/img/resources/azure/iot/time-series-insights-environments.png" alt="TimeSeriesInsightsEnvironments" style="float: left; padding-right: 5px;" >
+**diagrams.azure.iot.TimeSeriesInsightsEnvironments**
+
+<img width="30" src="/img/resources/azure/iot/time-series-insights-events-sources.png" alt="TimeSeriesInsightsEventsSources" style="float: left; padding-right: 5px;" >
+**diagrams.azure.iot.TimeSeriesInsightsEventsSources**
+
+<img width="30" src="/img/resources/azure/iot/windows-10-iot-core-services.png" alt="Windows10IotCoreServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.iot.Windows10IotCoreServices**
 
 ## azure.migration
 
-- **diagrams.azure.migration.DataBoxEdge**
-- **diagrams.azure.migration.DataBox**
-- **diagrams.azure.migration.DatabaseMigrationServices**
-- **diagrams.azure.migration.MigrationProjects**
-- **diagrams.azure.migration.RecoveryServicesVaults**
+
+<img width="30" src="/img/resources/azure/migration/data-box-edge.png" alt="DataBoxEdge" style="float: left; padding-right: 5px;" >
+**diagrams.azure.migration.DataBoxEdge**
+
+<img width="30" src="/img/resources/azure/migration/data-box.png" alt="DataBox" style="float: left; padding-right: 5px;" >
+**diagrams.azure.migration.DataBox**
+
+<img width="30" src="/img/resources/azure/migration/database-migration-services.png" alt="DatabaseMigrationServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.migration.DatabaseMigrationServices**
+
+<img width="30" src="/img/resources/azure/migration/migration-projects.png" alt="MigrationProjects" style="float: left; padding-right: 5px;" >
+**diagrams.azure.migration.MigrationProjects**
+
+<img width="30" src="/img/resources/azure/migration/recovery-services-vaults.png" alt="RecoveryServicesVaults" style="float: left; padding-right: 5px;" >
+**diagrams.azure.migration.RecoveryServicesVaults**
 
 ## azure.ml
 
-- **diagrams.azure.ml.BatchAI**
-- **diagrams.azure.ml.BotServices**
-- **diagrams.azure.ml.CognitiveServices**
-- **diagrams.azure.ml.GenomicsAccounts**
-- **diagrams.azure.ml.MachineLearningServiceWorkspaces**
-- **diagrams.azure.ml.MachineLearningStudioWebServicePlans**
-- **diagrams.azure.ml.MachineLearningStudioWebServices**
-- **diagrams.azure.ml.MachineLearningStudioWorkspaces**
+
+<img width="30" src="/img/resources/azure/ml/batch-ai.png" alt="BatchAI" style="float: left; padding-right: 5px;" >
+**diagrams.azure.ml.BatchAI**
+
+<img width="30" src="/img/resources/azure/ml/bot-services.png" alt="BotServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.ml.BotServices**
+
+<img width="30" src="/img/resources/azure/ml/cognitive-services.png" alt="CognitiveServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.ml.CognitiveServices**
+
+<img width="30" src="/img/resources/azure/ml/genomics-accounts.png" alt="GenomicsAccounts" style="float: left; padding-right: 5px;" >
+**diagrams.azure.ml.GenomicsAccounts**
+
+<img width="30" src="/img/resources/azure/ml/machine-learning-service-workspaces.png" alt="MachineLearningServiceWorkspaces" style="float: left; padding-right: 5px;" >
+**diagrams.azure.ml.MachineLearningServiceWorkspaces**
+
+<img width="30" src="/img/resources/azure/ml/machine-learning-studio-web-service-plans.png" alt="MachineLearningStudioWebServicePlans" style="float: left; padding-right: 5px;" >
+**diagrams.azure.ml.MachineLearningStudioWebServicePlans**
+
+<img width="30" src="/img/resources/azure/ml/machine-learning-studio-web-services.png" alt="MachineLearningStudioWebServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.ml.MachineLearningStudioWebServices**
+
+<img width="30" src="/img/resources/azure/ml/machine-learning-studio-workspaces.png" alt="MachineLearningStudioWorkspaces" style="float: left; padding-right: 5px;" >
+**diagrams.azure.ml.MachineLearningStudioWorkspaces**
 
 ## azure.mobile
 
-- **diagrams.azure.mobile.AppServiceMobile**
-- **diagrams.azure.mobile.MobileEngagement**
-- **diagrams.azure.mobile.NotificationHubs**
+
+<img width="30" src="/img/resources/azure/mobile/app-service-mobile.png" alt="AppServiceMobile" style="float: left; padding-right: 5px;" >
+**diagrams.azure.mobile.AppServiceMobile**
+
+<img width="30" src="/img/resources/azure/mobile/mobile-engagement.png" alt="MobileEngagement" style="float: left; padding-right: 5px;" >
+**diagrams.azure.mobile.MobileEngagement**
+
+<img width="30" src="/img/resources/azure/mobile/notification-hubs.png" alt="NotificationHubs" style="float: left; padding-right: 5px;" >
+**diagrams.azure.mobile.NotificationHubs**
 
 ## azure.network
 
-- **diagrams.azure.network.ApplicationGateway**
-- **diagrams.azure.network.ApplicationSecurityGroups**
-- **diagrams.azure.network.CDNProfiles**
-- **diagrams.azure.network.Connections**
-- **diagrams.azure.network.DDOSProtectionPlans**
-- **diagrams.azure.network.DNSPrivateZones**
-- **diagrams.azure.network.DNSZones**
-- **diagrams.azure.network.ExpressrouteCircuits**
-- **diagrams.azure.network.Firewall**
-- **diagrams.azure.network.FrontDoors**
-- **diagrams.azure.network.LoadBalancers**
-- **diagrams.azure.network.LocalNetworkGateways**
-- **diagrams.azure.network.NetworkInterfaces**
-- **diagrams.azure.network.NetworkSecurityGroupsClassic**
-- **diagrams.azure.network.NetworkWatcher**
-- **diagrams.azure.network.OnPremisesDataGateways**
-- **diagrams.azure.network.PublicIpAddresses**
-- **diagrams.azure.network.ReservedIpAddressesClassic**
-- **diagrams.azure.network.RouteFilters**
-- **diagrams.azure.network.RouteTables**
-- **diagrams.azure.network.ServiceEndpointPolicies**
-- **diagrams.azure.network.Subnets**
-- **diagrams.azure.network.TrafficManagerProfiles**
-- **diagrams.azure.network.VirtualNetworkClassic**
-- **diagrams.azure.network.VirtualNetworkGateways**
-- **diagrams.azure.network.VirtualNetworks**
-- **diagrams.azure.network.VirtualWans**
+
+<img width="30" src="/img/resources/azure/network/application-gateway.png" alt="ApplicationGateway" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.ApplicationGateway**
+
+<img width="30" src="/img/resources/azure/network/application-security-groups.png" alt="ApplicationSecurityGroups" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.ApplicationSecurityGroups**
+
+<img width="30" src="/img/resources/azure/network/cdn-profiles.png" alt="CDNProfiles" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.CDNProfiles**
+
+<img width="30" src="/img/resources/azure/network/connections.png" alt="Connections" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.Connections**
+
+<img width="30" src="/img/resources/azure/network/ddos-protection-plans.png" alt="DDOSProtectionPlans" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.DDOSProtectionPlans**
+
+<img width="30" src="/img/resources/azure/network/dns-private-zones.png" alt="DNSPrivateZones" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.DNSPrivateZones**
+
+<img width="30" src="/img/resources/azure/network/dns-zones.png" alt="DNSZones" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.DNSZones**
+
+<img width="30" src="/img/resources/azure/network/expressroute-circuits.png" alt="ExpressrouteCircuits" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.ExpressrouteCircuits**
+
+<img width="30" src="/img/resources/azure/network/firewall.png" alt="Firewall" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.Firewall**
+
+<img width="30" src="/img/resources/azure/network/front-doors.png" alt="FrontDoors" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.FrontDoors**
+
+<img width="30" src="/img/resources/azure/network/load-balancers.png" alt="LoadBalancers" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.LoadBalancers**
+
+<img width="30" src="/img/resources/azure/network/local-network-gateways.png" alt="LocalNetworkGateways" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.LocalNetworkGateways**
+
+<img width="30" src="/img/resources/azure/network/network-interfaces.png" alt="NetworkInterfaces" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.NetworkInterfaces**
+
+<img width="30" src="/img/resources/azure/network/network-security-groups-classic.png" alt="NetworkSecurityGroupsClassic" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.NetworkSecurityGroupsClassic**
+
+<img width="30" src="/img/resources/azure/network/network-watcher.png" alt="NetworkWatcher" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.NetworkWatcher**
+
+<img width="30" src="/img/resources/azure/network/on-premises-data-gateways.png" alt="OnPremisesDataGateways" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.OnPremisesDataGateways**
+
+<img width="30" src="/img/resources/azure/network/public-ip-addresses.png" alt="PublicIpAddresses" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.PublicIpAddresses**
+
+<img width="30" src="/img/resources/azure/network/reserved-ip-addresses-classic.png" alt="ReservedIpAddressesClassic" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.ReservedIpAddressesClassic**
+
+<img width="30" src="/img/resources/azure/network/route-filters.png" alt="RouteFilters" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.RouteFilters**
+
+<img width="30" src="/img/resources/azure/network/route-tables.png" alt="RouteTables" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.RouteTables**
+
+<img width="30" src="/img/resources/azure/network/service-endpoint-policies.png" alt="ServiceEndpointPolicies" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.ServiceEndpointPolicies**
+
+<img width="30" src="/img/resources/azure/network/subnets.png" alt="Subnets" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.Subnets**
+
+<img width="30" src="/img/resources/azure/network/traffic-manager-profiles.png" alt="TrafficManagerProfiles" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.TrafficManagerProfiles**
+
+<img width="30" src="/img/resources/azure/network/virtual-network-classic.png" alt="VirtualNetworkClassic" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.VirtualNetworkClassic**
+
+<img width="30" src="/img/resources/azure/network/virtual-network-gateways.png" alt="VirtualNetworkGateways" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.VirtualNetworkGateways**
+
+<img width="30" src="/img/resources/azure/network/virtual-networks.png" alt="VirtualNetworks" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.VirtualNetworks**
+
+<img width="30" src="/img/resources/azure/network/virtual-wans.png" alt="VirtualWans" style="float: left; padding-right: 5px;" >
+**diagrams.azure.network.VirtualWans**
 
 ## azure.security
 
-- **diagrams.azure.security.ApplicationSecurityGroups**
-- **diagrams.azure.security.ConditionalAccess**
-- **diagrams.azure.security.Defender**
-- **diagrams.azure.security.ExtendedSecurityUpdates**
-- **diagrams.azure.security.KeyVaults**
-- **diagrams.azure.security.SecurityCenter**
-- **diagrams.azure.security.Sentinel**
+
+<img width="30" src="/img/resources/azure/security/application-security-groups.png" alt="ApplicationSecurityGroups" style="float: left; padding-right: 5px;" >
+**diagrams.azure.security.ApplicationSecurityGroups**
+
+<img width="30" src="/img/resources/azure/security/conditional-access.png" alt="ConditionalAccess" style="float: left; padding-right: 5px;" >
+**diagrams.azure.security.ConditionalAccess**
+
+<img width="30" src="/img/resources/azure/security/defender.png" alt="Defender" style="float: left; padding-right: 5px;" >
+**diagrams.azure.security.Defender**
+
+<img width="30" src="/img/resources/azure/security/extended-security-updates.png" alt="ExtendedSecurityUpdates" style="float: left; padding-right: 5px;" >
+**diagrams.azure.security.ExtendedSecurityUpdates**
+
+<img width="30" src="/img/resources/azure/security/key-vaults.png" alt="KeyVaults" style="float: left; padding-right: 5px;" >
+**diagrams.azure.security.KeyVaults**
+
+<img width="30" src="/img/resources/azure/security/security-center.png" alt="SecurityCenter" style="float: left; padding-right: 5px;" >
+**diagrams.azure.security.SecurityCenter**
+
+<img width="30" src="/img/resources/azure/security/sentinel.png" alt="Sentinel" style="float: left; padding-right: 5px;" >
+**diagrams.azure.security.Sentinel**
 
 ## azure.storage
 
-- **diagrams.azure.storage.ArchiveStorage**
-- **diagrams.azure.storage.Azurefxtedgefiler**
-- **diagrams.azure.storage.BlobStorage**
-- **diagrams.azure.storage.DataBoxEdgeDataBoxGateway**
-- **diagrams.azure.storage.DataBox**
-- **diagrams.azure.storage.DataLakeStorage**
-- **diagrams.azure.storage.GeneralStorage**
-- **diagrams.azure.storage.NetappFiles**
-- **diagrams.azure.storage.QueuesStorage**
-- **diagrams.azure.storage.StorageAccountsClassic**
-- **diagrams.azure.storage.StorageAccounts**
-- **diagrams.azure.storage.StorageExplorer**
-- **diagrams.azure.storage.StorageSyncServices**
-- **diagrams.azure.storage.StorsimpleDataManagers**
-- **diagrams.azure.storage.StorsimpleDeviceManagers**
-- **diagrams.azure.storage.TableStorage**
+
+<img width="30" src="/img/resources/azure/storage/archive-storage.png" alt="ArchiveStorage" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.ArchiveStorage**
+
+<img width="30" src="/img/resources/azure/storage/azurefxtedgefiler.png" alt="Azurefxtedgefiler" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.Azurefxtedgefiler**
+
+<img width="30" src="/img/resources/azure/storage/blob-storage.png" alt="BlobStorage" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.BlobStorage**
+
+<img width="30" src="/img/resources/azure/storage/data-box-edge-data-box-gateway.png" alt="DataBoxEdgeDataBoxGateway" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.DataBoxEdgeDataBoxGateway**
+
+<img width="30" src="/img/resources/azure/storage/data-box.png" alt="DataBox" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.DataBox**
+
+<img width="30" src="/img/resources/azure/storage/data-lake-storage.png" alt="DataLakeStorage" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.DataLakeStorage**
+
+<img width="30" src="/img/resources/azure/storage/general-storage.png" alt="GeneralStorage" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.GeneralStorage**
+
+<img width="30" src="/img/resources/azure/storage/netapp-files.png" alt="NetappFiles" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.NetappFiles**
+
+<img width="30" src="/img/resources/azure/storage/queues-storage.png" alt="QueuesStorage" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.QueuesStorage**
+
+<img width="30" src="/img/resources/azure/storage/storage-accounts-classic.png" alt="StorageAccountsClassic" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.StorageAccountsClassic**
+
+<img width="30" src="/img/resources/azure/storage/storage-accounts.png" alt="StorageAccounts" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.StorageAccounts**
+
+<img width="30" src="/img/resources/azure/storage/storage-explorer.png" alt="StorageExplorer" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.StorageExplorer**
+
+<img width="30" src="/img/resources/azure/storage/storage-sync-services.png" alt="StorageSyncServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.StorageSyncServices**
+
+<img width="30" src="/img/resources/azure/storage/storsimple-data-managers.png" alt="StorsimpleDataManagers" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.StorsimpleDataManagers**
+
+<img width="30" src="/img/resources/azure/storage/storsimple-device-managers.png" alt="StorsimpleDeviceManagers" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.StorsimpleDeviceManagers**
+
+<img width="30" src="/img/resources/azure/storage/table-storage.png" alt="TableStorage" style="float: left; padding-right: 5px;" >
+**diagrams.azure.storage.TableStorage**
 
 ## azure.web
 
-- **diagrams.azure.web.APIConnections**
-- **diagrams.azure.web.AppServiceCertificates**
-- **diagrams.azure.web.AppServiceDomains**
-- **diagrams.azure.web.AppServiceEnvironments**
-- **diagrams.azure.web.AppServicePlans**
-- **diagrams.azure.web.AppServices**
-- **diagrams.azure.web.MediaServices**
-- **diagrams.azure.web.NotificationHubNamespaces**
-- **diagrams.azure.web.Search**
-- **diagrams.azure.web.Signalr**
+
+<img width="30" src="/img/resources/azure/web/api-connections.png" alt="APIConnections" style="float: left; padding-right: 5px;" >
+**diagrams.azure.web.APIConnections**
+
+<img width="30" src="/img/resources/azure/web/app-service-certificates.png" alt="AppServiceCertificates" style="float: left; padding-right: 5px;" >
+**diagrams.azure.web.AppServiceCertificates**
+
+<img width="30" src="/img/resources/azure/web/app-service-domains.png" alt="AppServiceDomains" style="float: left; padding-right: 5px;" >
+**diagrams.azure.web.AppServiceDomains**
+
+<img width="30" src="/img/resources/azure/web/app-service-environments.png" alt="AppServiceEnvironments" style="float: left; padding-right: 5px;" >
+**diagrams.azure.web.AppServiceEnvironments**
+
+<img width="30" src="/img/resources/azure/web/app-service-plans.png" alt="AppServicePlans" style="float: left; padding-right: 5px;" >
+**diagrams.azure.web.AppServicePlans**
+
+<img width="30" src="/img/resources/azure/web/app-services.png" alt="AppServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.web.AppServices**
+
+<img width="30" src="/img/resources/azure/web/media-services.png" alt="MediaServices" style="float: left; padding-right: 5px;" >
+**diagrams.azure.web.MediaServices**
+
+<img width="30" src="/img/resources/azure/web/notification-hub-namespaces.png" alt="NotificationHubNamespaces" style="float: left; padding-right: 5px;" >
+**diagrams.azure.web.NotificationHubNamespaces**
+
+<img width="30" src="/img/resources/azure/web/search.png" alt="Search" style="float: left; padding-right: 5px;" >
+**diagrams.azure.web.Search**
+
+<img width="30" src="/img/resources/azure/web/signalr.png" alt="Signalr" style="float: left; padding-right: 5px;" >
+**diagrams.azure.web.Signalr**

docs/nodes/digitalocean.md

@@ -7,37 +7,87 @@ Node classes list of digitalocean provider.
 
 ## digitalocean.compute
 
-- **diagrams.digitalocean.compute.Containers**
-- **diagrams.digitalocean.compute.Docker**
-- **diagrams.digitalocean.compute.DropletConnect**
-- **diagrams.digitalocean.compute.DropletSnapshot**
-- **diagrams.digitalocean.compute.Droplet**
-- **diagrams.digitalocean.compute.K8SCluster**
-- **diagrams.digitalocean.compute.K8SNodePool**
-- **diagrams.digitalocean.compute.K8SNode**
+
+<img width="30" src="/img/resources/digitalocean/compute/containers.png" alt="Containers" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.compute.Containers**
+
+<img width="30" src="/img/resources/digitalocean/compute/docker.png" alt="Docker" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.compute.Docker**
+
+<img width="30" src="/img/resources/digitalocean/compute/droplet-connect.png" alt="DropletConnect" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.compute.DropletConnect**
+
+<img width="30" src="/img/resources/digitalocean/compute/droplet-snapshot.png" alt="DropletSnapshot" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.compute.DropletSnapshot**
+
+<img width="30" src="/img/resources/digitalocean/compute/droplet.png" alt="Droplet" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.compute.Droplet**
+
+<img width="30" src="/img/resources/digitalocean/compute/k8s-cluster.png" alt="K8SCluster" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.compute.K8SCluster**
+
+<img width="30" src="/img/resources/digitalocean/compute/k8s-node-pool.png" alt="K8SNodePool" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.compute.K8SNodePool**
+
+<img width="30" src="/img/resources/digitalocean/compute/k8s-node.png" alt="K8SNode" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.compute.K8SNode**
 
 ## digitalocean.database
 
-- **diagrams.digitalocean.database.DbaasPrimaryStandbyMore**
-- **diagrams.digitalocean.database.DbaasPrimary**
-- **diagrams.digitalocean.database.DbaasReadOnly**
-- **diagrams.digitalocean.database.DbaasStandby**
+
+<img width="30" src="/img/resources/digitalocean/database/dbaas-primary-standby-more.png" alt="DbaasPrimaryStandbyMore" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.database.DbaasPrimaryStandbyMore**
+
+<img width="30" src="/img/resources/digitalocean/database/dbaas-primary.png" alt="DbaasPrimary" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.database.DbaasPrimary**
+
+<img width="30" src="/img/resources/digitalocean/database/dbaas-read-only.png" alt="DbaasReadOnly" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.database.DbaasReadOnly**
+
+<img width="30" src="/img/resources/digitalocean/database/dbaas-standby.png" alt="DbaasStandby" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.database.DbaasStandby**
 
 ## digitalocean.network
 
-- **diagrams.digitalocean.network.Certificate**
-- **diagrams.digitalocean.network.DomainRegistration**
-- **diagrams.digitalocean.network.Domain**
-- **diagrams.digitalocean.network.Firewall**
-- **diagrams.digitalocean.network.FloatingIp**
-- **diagrams.digitalocean.network.InternetGateway**
-- **diagrams.digitalocean.network.LoadBalancer**
-- **diagrams.digitalocean.network.ManagedVpn**
-- **diagrams.digitalocean.network.Vpc**
+
+<img width="30" src="/img/resources/digitalocean/network/certificate.png" alt="Certificate" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.network.Certificate**
+
+<img width="30" src="/img/resources/digitalocean/network/domain-registration.png" alt="DomainRegistration" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.network.DomainRegistration**
+
+<img width="30" src="/img/resources/digitalocean/network/domain.png" alt="Domain" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.network.Domain**
+
+<img width="30" src="/img/resources/digitalocean/network/firewall.png" alt="Firewall" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.network.Firewall**
+
+<img width="30" src="/img/resources/digitalocean/network/floating-ip.png" alt="FloatingIp" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.network.FloatingIp**
+
+<img width="30" src="/img/resources/digitalocean/network/internet-gateway.png" alt="InternetGateway" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.network.InternetGateway**
+
+<img width="30" src="/img/resources/digitalocean/network/load-balancer.png" alt="LoadBalancer" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.network.LoadBalancer**
+
+<img width="30" src="/img/resources/digitalocean/network/managed-vpn.png" alt="ManagedVpn" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.network.ManagedVpn**
+
+<img width="30" src="/img/resources/digitalocean/network/vpc.png" alt="Vpc" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.network.Vpc**
 
 ## digitalocean.storage
 
-- **diagrams.digitalocean.storage.Folder**
-- **diagrams.digitalocean.storage.Space**
-- **diagrams.digitalocean.storage.VolumeSnapshot**
-- **diagrams.digitalocean.storage.Volume**
+
+<img width="30" src="/img/resources/digitalocean/storage/folder.png" alt="Folder" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.storage.Folder**
+
+<img width="30" src="/img/resources/digitalocean/storage/space.png" alt="Space" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.storage.Space**
+
+<img width="30" src="/img/resources/digitalocean/storage/volume-snapshot.png" alt="VolumeSnapshot" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.storage.VolumeSnapshot**
+
+<img width="30" src="/img/resources/digitalocean/storage/volume.png" alt="Volume" style="float: left; padding-right: 5px;" >
+**diagrams.digitalocean.storage.Volume**

docs/nodes/elastic.md

@@ -7,44 +7,96 @@ Node classes list of elastic provider.
 
 ## elastic.elasticsearch
 
-- **diagrams.elastic.elasticsearch.Alerting**
-- **diagrams.elastic.elasticsearch.Beats**
-- **diagrams.elastic.elasticsearch.Elasticsearch**
-- **diagrams.elastic.elasticsearch.Kibana**
-- **diagrams.elastic.elasticsearch.Logstash**, **LogStash** (alias)
-- **diagrams.elastic.elasticsearch.MachineLearning**
-- **diagrams.elastic.elasticsearch.Maps**
-- **diagrams.elastic.elasticsearch.Monitoring**
-- **diagrams.elastic.elasticsearch.SecuritySettings**
-- **diagrams.elastic.elasticsearch.Sql**
+
+<img width="30" src="/img/resources/elastic/elasticsearch/alerting.png" alt="Alerting" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.elasticsearch.Alerting**
+
+<img width="30" src="/img/resources/elastic/elasticsearch/beats.png" alt="Beats" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.elasticsearch.Beats**
+
+<img width="30" src="/img/resources/elastic/elasticsearch/elasticsearch.png" alt="Elasticsearch" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.elasticsearch.Elasticsearch**
+
+<img width="30" src="/img/resources/elastic/elasticsearch/kibana.png" alt="Kibana" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.elasticsearch.Kibana**
+
+<img width="30" src="/img/resources/elastic/elasticsearch/logstash.png" alt="Logstash" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.elasticsearch.Logstash**, **LogStash** (alias)
+
+<img width="30" src="/img/resources/elastic/elasticsearch/machine-learning.png" alt="MachineLearning" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.elasticsearch.MachineLearning**
+
+<img width="30" src="/img/resources/elastic/elasticsearch/maps.png" alt="Maps" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.elasticsearch.Maps**
+
+<img width="30" src="/img/resources/elastic/elasticsearch/monitoring.png" alt="Monitoring" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.elasticsearch.Monitoring**
+
+<img width="30" src="/img/resources/elastic/elasticsearch/security-settings.png" alt="SecuritySettings" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.elasticsearch.SecuritySettings**
+
+<img width="30" src="/img/resources/elastic/elasticsearch/sql.png" alt="Sql" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.elasticsearch.Sql**
 
 ## elastic.enterprisesearch
 
-- **diagrams.elastic.enterprisesearch.AppSearch**
-- **diagrams.elastic.enterprisesearch.EnterpriseSearch**
-- **diagrams.elastic.enterprisesearch.SiteSearch**
-- **diagrams.elastic.enterprisesearch.WorkplaceSearch**
+
+<img width="30" src="/img/resources/elastic/enterprisesearch/app-search.png" alt="AppSearch" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.enterprisesearch.AppSearch**
+
+<img width="30" src="/img/resources/elastic/enterprisesearch/enterprise-search.png" alt="EnterpriseSearch" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.enterprisesearch.EnterpriseSearch**
+
+<img width="30" src="/img/resources/elastic/enterprisesearch/site-search.png" alt="SiteSearch" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.enterprisesearch.SiteSearch**
+
+<img width="30" src="/img/resources/elastic/enterprisesearch/workplace-search.png" alt="WorkplaceSearch" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.enterprisesearch.WorkplaceSearch**
 
 ## elastic.observability
 
-- **diagrams.elastic.observability.APM**
-- **diagrams.elastic.observability.Logs**
-- **diagrams.elastic.observability.Metrics**
-- **diagrams.elastic.observability.Observability**
-- **diagrams.elastic.observability.Uptime**
+
+<img width="30" src="/img/resources/elastic/observability/apm.png" alt="APM" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.observability.APM**
+
+<img width="30" src="/img/resources/elastic/observability/logs.png" alt="Logs" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.observability.Logs**
+
+<img width="30" src="/img/resources/elastic/observability/metrics.png" alt="Metrics" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.observability.Metrics**
+
+<img width="30" src="/img/resources/elastic/observability/observability.png" alt="Observability" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.observability.Observability**
+
+<img width="30" src="/img/resources/elastic/observability/uptime.png" alt="Uptime" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.observability.Uptime**
 
 ## elastic.orchestration
 
-- **diagrams.elastic.orchestration.ECE**
-- **diagrams.elastic.orchestration.ECK**
+
+<img width="30" src="/img/resources/elastic/orchestration/ece.png" alt="ECE" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.orchestration.ECE**
+
+<img width="30" src="/img/resources/elastic/orchestration/eck.png" alt="ECK" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.orchestration.ECK**
 
 ## elastic.saas
 
-- **diagrams.elastic.saas.Cloud**
-- **diagrams.elastic.saas.Elastic**
+
+<img width="30" src="/img/resources/elastic/saas/cloud.png" alt="Cloud" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.saas.Cloud**
+
+<img width="30" src="/img/resources/elastic/saas/elastic.png" alt="Elastic" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.saas.Elastic**
 
 ## elastic.security
 
-- **diagrams.elastic.security.Endpoint**
-- **diagrams.elastic.security.Security**
-- **diagrams.elastic.security.SIEM**
+
+<img width="30" src="/img/resources/elastic/security/endpoint.png" alt="Endpoint" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.security.Endpoint**
+
+<img width="30" src="/img/resources/elastic/security/security.png" alt="Security" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.security.Security**
+
+<img width="30" src="/img/resources/elastic/security/siem.png" alt="SIEM" style="float: left; padding-right: 5px;" >
+**diagrams.elastic.security.SIEM**

docs/nodes/firebase.md

@@ -7,37 +7,81 @@ Node classes list of firebase provider.
 
 ## firebase.base
 
-- **diagrams.firebase.base.Firebase**
+
+<img width="30" src="/img/resources/firebase/base/firebase.png" alt="Firebase" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.base.Firebase**
 
 ## firebase.develop
 
-- **diagrams.firebase.develop.Authentication**
-- **diagrams.firebase.develop.Firestore**
-- **diagrams.firebase.develop.Functions**
-- **diagrams.firebase.develop.Hosting**
-- **diagrams.firebase.develop.MLKit**
-- **diagrams.firebase.develop.RealtimeDatabase**
-- **diagrams.firebase.develop.Storage**
+
+<img width="30" src="/img/resources/firebase/develop/authentication.png" alt="Authentication" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.develop.Authentication**
+
+<img width="30" src="/img/resources/firebase/develop/firestore.png" alt="Firestore" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.develop.Firestore**
+
+<img width="30" src="/img/resources/firebase/develop/functions.png" alt="Functions" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.develop.Functions**
+
+<img width="30" src="/img/resources/firebase/develop/hosting.png" alt="Hosting" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.develop.Hosting**
+
+<img width="30" src="/img/resources/firebase/develop/ml-kit.png" alt="MLKit" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.develop.MLKit**
+
+<img width="30" src="/img/resources/firebase/develop/realtime-database.png" alt="RealtimeDatabase" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.develop.RealtimeDatabase**
+
+<img width="30" src="/img/resources/firebase/develop/storage.png" alt="Storage" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.develop.Storage**
 
 ## firebase.extentions
 
-- **diagrams.firebase.extentions.Extensions**
+
+<img width="30" src="/img/resources/firebase/extentions/extensions.png" alt="Extensions" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.extentions.Extensions**
 
 ## firebase.grow
 
-- **diagrams.firebase.grow.ABTesting**
-- **diagrams.firebase.grow.AppIndexing**
-- **diagrams.firebase.grow.DynamicLinks**
-- **diagrams.firebase.grow.InAppMessaging**
-- **diagrams.firebase.grow.Invites**
-- **diagrams.firebase.grow.Messaging**, **FCM** (alias)
-- **diagrams.firebase.grow.Predictions**
-- **diagrams.firebase.grow.RemoteConfig**
+
+<img width="30" src="/img/resources/firebase/grow/ab-testing.png" alt="ABTesting" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.grow.ABTesting**
+
+<img width="30" src="/img/resources/firebase/grow/app-indexing.png" alt="AppIndexing" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.grow.AppIndexing**
+
+<img width="30" src="/img/resources/firebase/grow/dynamic-links.png" alt="DynamicLinks" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.grow.DynamicLinks**
+
+<img width="30" src="/img/resources/firebase/grow/in-app-messaging.png" alt="InAppMessaging" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.grow.InAppMessaging**
+
+<img width="30" src="/img/resources/firebase/grow/invites.png" alt="Invites" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.grow.Invites**
+
+<img width="30" src="/img/resources/firebase/grow/messaging.png" alt="Messaging" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.grow.Messaging**, **FCM** (alias)
+
+<img width="30" src="/img/resources/firebase/grow/predictions.png" alt="Predictions" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.grow.Predictions**
+
+<img width="30" src="/img/resources/firebase/grow/remote-config.png" alt="RemoteConfig" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.grow.RemoteConfig**
 
 ## firebase.quality
 
-- **diagrams.firebase.quality.AppDistribution**
-- **diagrams.firebase.quality.CrashReporting**
-- **diagrams.firebase.quality.Crashlytics**
-- **diagrams.firebase.quality.PerformanceMonitoring**
-- **diagrams.firebase.quality.TestLab**
+
+<img width="30" src="/img/resources/firebase/quality/app-distribution.png" alt="AppDistribution" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.quality.AppDistribution**
+
+<img width="30" src="/img/resources/firebase/quality/crash-reporting.png" alt="CrashReporting" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.quality.CrashReporting**
+
+<img width="30" src="/img/resources/firebase/quality/crashlytics.png" alt="Crashlytics" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.quality.Crashlytics**
+
+<img width="30" src="/img/resources/firebase/quality/performance-monitoring.png" alt="PerformanceMonitoring" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.quality.PerformanceMonitoring**
+
+<img width="30" src="/img/resources/firebase/quality/test-lab.png" alt="TestLab" style="float: left; padding-right: 5px;" >
+**diagrams.firebase.quality.TestLab**

docs/nodes/gcp.md

@@ -7,127 +7,309 @@ Node classes list of gcp provider.
 
 ## gcp.analytics
 
-- **diagrams.gcp.analytics.Bigquery**, **BigQuery** (alias)
-- **diagrams.gcp.analytics.Composer**
-- **diagrams.gcp.analytics.DataCatalog**
-- **diagrams.gcp.analytics.DataFusion**
-- **diagrams.gcp.analytics.Dataflow**
-- **diagrams.gcp.analytics.Datalab**
-- **diagrams.gcp.analytics.Dataprep**
-- **diagrams.gcp.analytics.Dataproc**
-- **diagrams.gcp.analytics.Genomics**
-- **diagrams.gcp.analytics.Pubsub**, **PubSub** (alias)
+
+<img width="30" src="/img/resources/gcp/analytics/bigquery.png" alt="Bigquery" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.analytics.Bigquery**, **BigQuery** (alias)
+
+<img width="30" src="/img/resources/gcp/analytics/composer.png" alt="Composer" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.analytics.Composer**
+
+<img width="30" src="/img/resources/gcp/analytics/data-catalog.png" alt="DataCatalog" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.analytics.DataCatalog**
+
+<img width="30" src="/img/resources/gcp/analytics/data-fusion.png" alt="DataFusion" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.analytics.DataFusion**
+
+<img width="30" src="/img/resources/gcp/analytics/dataflow.png" alt="Dataflow" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.analytics.Dataflow**
+
+<img width="30" src="/img/resources/gcp/analytics/datalab.png" alt="Datalab" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.analytics.Datalab**
+
+<img width="30" src="/img/resources/gcp/analytics/dataprep.png" alt="Dataprep" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.analytics.Dataprep**
+
+<img width="30" src="/img/resources/gcp/analytics/dataproc.png" alt="Dataproc" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.analytics.Dataproc**
+
+<img width="30" src="/img/resources/gcp/analytics/genomics.png" alt="Genomics" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.analytics.Genomics**
+
+<img width="30" src="/img/resources/gcp/analytics/pubsub.png" alt="Pubsub" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.analytics.Pubsub**, **PubSub** (alias)
 
 ## gcp.api
 
-- **diagrams.gcp.api.APIGateway**
-- **diagrams.gcp.api.Endpoints**
+
+<img width="30" src="/img/resources/gcp/api/api-gateway.png" alt="APIGateway" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.api.APIGateway**
+
+<img width="30" src="/img/resources/gcp/api/endpoints.png" alt="Endpoints" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.api.Endpoints**
 
 ## gcp.compute
 
-- **diagrams.gcp.compute.AppEngine**, **GAE** (alias)
-- **diagrams.gcp.compute.ComputeEngine**, **GCE** (alias)
-- **diagrams.gcp.compute.ContainerOptimizedOS**
-- **diagrams.gcp.compute.Functions**, **GCF** (alias)
-- **diagrams.gcp.compute.GKEOnPrem**
-- **diagrams.gcp.compute.GPU**
-- **diagrams.gcp.compute.KubernetesEngine**, **GKE** (alias)
-- **diagrams.gcp.compute.Run**
+
+<img width="30" src="/img/resources/gcp/compute/app-engine.png" alt="AppEngine" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.compute.AppEngine**, **GAE** (alias)
+
+<img width="30" src="/img/resources/gcp/compute/compute-engine.png" alt="ComputeEngine" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.compute.ComputeEngine**, **GCE** (alias)
+
+<img width="30" src="/img/resources/gcp/compute/container-optimized-os.png" alt="ContainerOptimizedOS" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.compute.ContainerOptimizedOS**
+
+<img width="30" src="/img/resources/gcp/compute/functions.png" alt="Functions" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.compute.Functions**, **GCF** (alias)
+
+<img width="30" src="/img/resources/gcp/compute/gke-on-prem.png" alt="GKEOnPrem" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.compute.GKEOnPrem**
+
+<img width="30" src="/img/resources/gcp/compute/gpu.png" alt="GPU" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.compute.GPU**
+
+<img width="30" src="/img/resources/gcp/compute/kubernetes-engine.png" alt="KubernetesEngine" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.compute.KubernetesEngine**, **GKE** (alias)
+
+<img width="30" src="/img/resources/gcp/compute/run.png" alt="Run" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.compute.Run**
 
 ## gcp.database
 
-- **diagrams.gcp.database.Bigtable**, **BigTable** (alias)
-- **diagrams.gcp.database.Datastore**
-- **diagrams.gcp.database.Firestore**
-- **diagrams.gcp.database.Memorystore**
-- **diagrams.gcp.database.Spanner**
-- **diagrams.gcp.database.SQL**
+
+<img width="30" src="/img/resources/gcp/database/bigtable.png" alt="Bigtable" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.database.Bigtable**, **BigTable** (alias)
+
+<img width="30" src="/img/resources/gcp/database/datastore.png" alt="Datastore" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.database.Datastore**
+
+<img width="30" src="/img/resources/gcp/database/firestore.png" alt="Firestore" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.database.Firestore**
+
+<img width="30" src="/img/resources/gcp/database/memorystore.png" alt="Memorystore" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.database.Memorystore**
+
+<img width="30" src="/img/resources/gcp/database/spanner.png" alt="Spanner" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.database.Spanner**
+
+<img width="30" src="/img/resources/gcp/database/sql.png" alt="SQL" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.database.SQL**
 
 ## gcp.devtools
 
-- **diagrams.gcp.devtools.Build**
-- **diagrams.gcp.devtools.CodeForIntellij**
-- **diagrams.gcp.devtools.Code**
-- **diagrams.gcp.devtools.ContainerRegistry**, **GCR** (alias)
-- **diagrams.gcp.devtools.GradleAppEnginePlugin**
-- **diagrams.gcp.devtools.IdePlugins**
-- **diagrams.gcp.devtools.MavenAppEnginePlugin**
-- **diagrams.gcp.devtools.Scheduler**
-- **diagrams.gcp.devtools.SDK**
-- **diagrams.gcp.devtools.SourceRepositories**
-- **diagrams.gcp.devtools.Tasks**
-- **diagrams.gcp.devtools.TestLab**
-- **diagrams.gcp.devtools.ToolsForEclipse**
-- **diagrams.gcp.devtools.ToolsForPowershell**
-- **diagrams.gcp.devtools.ToolsForVisualStudio**
+
+<img width="30" src="/img/resources/gcp/devtools/build.png" alt="Build" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.Build**
+
+<img width="30" src="/img/resources/gcp/devtools/code-for-intellij.png" alt="CodeForIntellij" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.CodeForIntellij**
+
+<img width="30" src="/img/resources/gcp/devtools/code.png" alt="Code" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.Code**
+
+<img width="30" src="/img/resources/gcp/devtools/container-registry.png" alt="ContainerRegistry" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.ContainerRegistry**, **GCR** (alias)
+
+<img width="30" src="/img/resources/gcp/devtools/gradle-app-engine-plugin.png" alt="GradleAppEnginePlugin" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.GradleAppEnginePlugin**
+
+<img width="30" src="/img/resources/gcp/devtools/ide-plugins.png" alt="IdePlugins" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.IdePlugins**
+
+<img width="30" src="/img/resources/gcp/devtools/maven-app-engine-plugin.png" alt="MavenAppEnginePlugin" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.MavenAppEnginePlugin**
+
+<img width="30" src="/img/resources/gcp/devtools/scheduler.png" alt="Scheduler" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.Scheduler**
+
+<img width="30" src="/img/resources/gcp/devtools/sdk.png" alt="SDK" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.SDK**
+
+<img width="30" src="/img/resources/gcp/devtools/source-repositories.png" alt="SourceRepositories" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.SourceRepositories**
+
+<img width="30" src="/img/resources/gcp/devtools/tasks.png" alt="Tasks" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.Tasks**
+
+<img width="30" src="/img/resources/gcp/devtools/test-lab.png" alt="TestLab" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.TestLab**
+
+<img width="30" src="/img/resources/gcp/devtools/tools-for-eclipse.png" alt="ToolsForEclipse" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.ToolsForEclipse**
+
+<img width="30" src="/img/resources/gcp/devtools/tools-for-powershell.png" alt="ToolsForPowershell" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.ToolsForPowershell**
+
+<img width="30" src="/img/resources/gcp/devtools/tools-for-visual-studio.png" alt="ToolsForVisualStudio" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.devtools.ToolsForVisualStudio**
 
 ## gcp.iot
 
-- **diagrams.gcp.iot.IotCore**
+
+<img width="30" src="/img/resources/gcp/iot/iot-core.png" alt="IotCore" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.iot.IotCore**
 
 ## gcp.migration
 
-- **diagrams.gcp.migration.TransferAppliance**
+
+<img width="30" src="/img/resources/gcp/migration/transfer-appliance.png" alt="TransferAppliance" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.migration.TransferAppliance**
 
 ## gcp.ml
 
-- **diagrams.gcp.ml.AdvancedSolutionsLab**
-- **diagrams.gcp.ml.AIHub**
-- **diagrams.gcp.ml.AIPlatformDataLabelingService**
-- **diagrams.gcp.ml.AIPlatform**
-- **diagrams.gcp.ml.AutomlNaturalLanguage**
-- **diagrams.gcp.ml.AutomlTables**
-- **diagrams.gcp.ml.AutomlTranslation**
-- **diagrams.gcp.ml.AutomlVideoIntelligence**
-- **diagrams.gcp.ml.AutomlVision**
-- **diagrams.gcp.ml.Automl**, **AutoML** (alias)
-- **diagrams.gcp.ml.DialogFlowEnterpriseEdition**
-- **diagrams.gcp.ml.InferenceAPI**
-- **diagrams.gcp.ml.JobsAPI**
-- **diagrams.gcp.ml.NaturalLanguageAPI**, **NLAPI** (alias)
-- **diagrams.gcp.ml.RecommendationsAI**
-- **diagrams.gcp.ml.SpeechToText**, **STT** (alias)
-- **diagrams.gcp.ml.TextToSpeech**, **TTS** (alias)
-- **diagrams.gcp.ml.TPU**
-- **diagrams.gcp.ml.TranslationAPI**
-- **diagrams.gcp.ml.VideoIntelligenceAPI**
-- **diagrams.gcp.ml.VisionAPI**
+
+<img width="30" src="/img/resources/gcp/ml/advanced-solutions-lab.png" alt="AdvancedSolutionsLab" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.AdvancedSolutionsLab**
+
+<img width="30" src="/img/resources/gcp/ml/ai-hub.png" alt="AIHub" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.AIHub**
+
+<img width="30" src="/img/resources/gcp/ml/ai-platform-data-labeling-service.png" alt="AIPlatformDataLabelingService" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.AIPlatformDataLabelingService**
+
+<img width="30" src="/img/resources/gcp/ml/ai-platform.png" alt="AIPlatform" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.AIPlatform**
+
+<img width="30" src="/img/resources/gcp/ml/automl-natural-language.png" alt="AutomlNaturalLanguage" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.AutomlNaturalLanguage**
+
+<img width="30" src="/img/resources/gcp/ml/automl-tables.png" alt="AutomlTables" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.AutomlTables**
+
+<img width="30" src="/img/resources/gcp/ml/automl-translation.png" alt="AutomlTranslation" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.AutomlTranslation**
+
+<img width="30" src="/img/resources/gcp/ml/automl-video-intelligence.png" alt="AutomlVideoIntelligence" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.AutomlVideoIntelligence**
+
+<img width="30" src="/img/resources/gcp/ml/automl-vision.png" alt="AutomlVision" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.AutomlVision**
+
+<img width="30" src="/img/resources/gcp/ml/automl.png" alt="Automl" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.Automl**, **AutoML** (alias)
+
+<img width="30" src="/img/resources/gcp/ml/dialog-flow-enterprise-edition.png" alt="DialogFlowEnterpriseEdition" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.DialogFlowEnterpriseEdition**
+
+<img width="30" src="/img/resources/gcp/ml/inference-api.png" alt="InferenceAPI" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.InferenceAPI**
+
+<img width="30" src="/img/resources/gcp/ml/jobs-api.png" alt="JobsAPI" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.JobsAPI**
+
+<img width="30" src="/img/resources/gcp/ml/natural-language-api.png" alt="NaturalLanguageAPI" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.NaturalLanguageAPI**, **NLAPI** (alias)
+
+<img width="30" src="/img/resources/gcp/ml/recommendations-ai.png" alt="RecommendationsAI" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.RecommendationsAI**
+
+<img width="30" src="/img/resources/gcp/ml/speech-to-text.png" alt="SpeechToText" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.SpeechToText**, **STT** (alias)
+
+<img width="30" src="/img/resources/gcp/ml/text-to-speech.png" alt="TextToSpeech" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.TextToSpeech**, **TTS** (alias)
+
+<img width="30" src="/img/resources/gcp/ml/tpu.png" alt="TPU" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.TPU**
+
+<img width="30" src="/img/resources/gcp/ml/translation-api.png" alt="TranslationAPI" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.TranslationAPI**
+
+<img width="30" src="/img/resources/gcp/ml/video-intelligence-api.png" alt="VideoIntelligenceAPI" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.VideoIntelligenceAPI**
+
+<img width="30" src="/img/resources/gcp/ml/vision-api.png" alt="VisionAPI" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.ml.VisionAPI**
 
 ## gcp.network
 
-- **diagrams.gcp.network.Armor**
-- **diagrams.gcp.network.CDN**
-- **diagrams.gcp.network.DedicatedInterconnect**
-- **diagrams.gcp.network.DNS**
-- **diagrams.gcp.network.ExternalIpAddresses**
-- **diagrams.gcp.network.FirewallRules**
-- **diagrams.gcp.network.LoadBalancing**
-- **diagrams.gcp.network.NAT**
-- **diagrams.gcp.network.Network**
-- **diagrams.gcp.network.PartnerInterconnect**
-- **diagrams.gcp.network.PremiumNetworkTier**
-- **diagrams.gcp.network.Router**
-- **diagrams.gcp.network.Routes**
-- **diagrams.gcp.network.StandardNetworkTier**
-- **diagrams.gcp.network.TrafficDirector**
-- **diagrams.gcp.network.VirtualPrivateCloud**, **VPC** (alias)
-- **diagrams.gcp.network.VPN**
+
+<img width="30" src="/img/resources/gcp/network/armor.png" alt="Armor" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.Armor**
+
+<img width="30" src="/img/resources/gcp/network/cdn.png" alt="CDN" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.CDN**
+
+<img width="30" src="/img/resources/gcp/network/dedicated-interconnect.png" alt="DedicatedInterconnect" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.DedicatedInterconnect**
+
+<img width="30" src="/img/resources/gcp/network/dns.png" alt="DNS" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.DNS**
+
+<img width="30" src="/img/resources/gcp/network/external-ip-addresses.png" alt="ExternalIpAddresses" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.ExternalIpAddresses**
+
+<img width="30" src="/img/resources/gcp/network/firewall-rules.png" alt="FirewallRules" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.FirewallRules**
+
+<img width="30" src="/img/resources/gcp/network/load-balancing.png" alt="LoadBalancing" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.LoadBalancing**
+
+<img width="30" src="/img/resources/gcp/network/nat.png" alt="NAT" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.NAT**
+
+<img width="30" src="/img/resources/gcp/network/network.png" alt="Network" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.Network**
+
+<img width="30" src="/img/resources/gcp/network/partner-interconnect.png" alt="PartnerInterconnect" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.PartnerInterconnect**
+
+<img width="30" src="/img/resources/gcp/network/premium-network-tier.png" alt="PremiumNetworkTier" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.PremiumNetworkTier**
+
+<img width="30" src="/img/resources/gcp/network/router.png" alt="Router" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.Router**
+
+<img width="30" src="/img/resources/gcp/network/routes.png" alt="Routes" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.Routes**
+
+<img width="30" src="/img/resources/gcp/network/standard-network-tier.png" alt="StandardNetworkTier" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.StandardNetworkTier**
+
+<img width="30" src="/img/resources/gcp/network/traffic-director.png" alt="TrafficDirector" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.TrafficDirector**
+
+<img width="30" src="/img/resources/gcp/network/virtual-private-cloud.png" alt="VirtualPrivateCloud" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.VirtualPrivateCloud**, **VPC** (alias)
+
+<img width="30" src="/img/resources/gcp/network/vpn.png" alt="VPN" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.network.VPN**
 
 ## gcp.operations
 
-- **diagrams.gcp.operations.Monitoring**
+
+<img width="30" src="/img/resources/gcp/operations/monitoring.png" alt="Monitoring" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.operations.Monitoring**
 
 ## gcp.security
 
-- **diagrams.gcp.security.Iam**
-- **diagrams.gcp.security.IAP**
-- **diagrams.gcp.security.KeyManagementService**, **KMS** (alias)
-- **diagrams.gcp.security.ResourceManager**
-- **diagrams.gcp.security.SecurityCommandCenter**, **SCC** (alias)
-- **diagrams.gcp.security.SecurityScanner**
+
+<img width="30" src="/img/resources/gcp/security/iam.png" alt="Iam" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.security.Iam**
+
+<img width="30" src="/img/resources/gcp/security/iap.png" alt="IAP" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.security.IAP**
+
+<img width="30" src="/img/resources/gcp/security/key-management-service.png" alt="KeyManagementService" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.security.KeyManagementService**, **KMS** (alias)
+
+<img width="30" src="/img/resources/gcp/security/resource-manager.png" alt="ResourceManager" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.security.ResourceManager**
+
+<img width="30" src="/img/resources/gcp/security/security-command-center.png" alt="SecurityCommandCenter" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.security.SecurityCommandCenter**, **SCC** (alias)
+
+<img width="30" src="/img/resources/gcp/security/security-scanner.png" alt="SecurityScanner" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.security.SecurityScanner**
 
 ## gcp.storage
 
-- **diagrams.gcp.storage.Filestore**
-- **diagrams.gcp.storage.PersistentDisk**
-- **diagrams.gcp.storage.Storage**, **GCS** (alias)
+
+<img width="30" src="/img/resources/gcp/storage/filestore.png" alt="Filestore" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.storage.Filestore**
+
+<img width="30" src="/img/resources/gcp/storage/persistent-disk.png" alt="PersistentDisk" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.storage.PersistentDisk**
+
+<img width="30" src="/img/resources/gcp/storage/storage.png" alt="Storage" style="float: left; padding-right: 5px;" >
+**diagrams.gcp.storage.Storage**, **GCS** (alias)

docs/nodes/generic.md

@@ -7,51 +7,99 @@ Node classes list of generic provider.
 
 ## generic.blank
 
-- **diagrams.generic.blank.Blank**
+
+<img width="30" src="/img/resources/generic/blank/blank.png" alt="Blank" style="float: left; padding-right: 5px;" >
+**diagrams.generic.blank.Blank**
 
 ## generic.compute
 
-- **diagrams.generic.compute.Rack**
+
+<img width="30" src="/img/resources/generic/compute/rack.png" alt="Rack" style="float: left; padding-right: 5px;" >
+**diagrams.generic.compute.Rack**
 
 ## generic.database
 
-- **diagrams.generic.database.SQL**
+
+<img width="30" src="/img/resources/generic/database/sql.png" alt="SQL" style="float: left; padding-right: 5px;" >
+**diagrams.generic.database.SQL**
 
 ## generic.device
 
-- **diagrams.generic.device.Mobile**
-- **diagrams.generic.device.Tablet**
+
+<img width="30" src="/img/resources/generic/device/mobile.png" alt="Mobile" style="float: left; padding-right: 5px;" >
+**diagrams.generic.device.Mobile**
+
+<img width="30" src="/img/resources/generic/device/tablet.png" alt="Tablet" style="float: left; padding-right: 5px;" >
+**diagrams.generic.device.Tablet**
 
 ## generic.network
 
-- **diagrams.generic.network.Firewall**
-- **diagrams.generic.network.Router**
-- **diagrams.generic.network.Subnet**
-- **diagrams.generic.network.Switch**
-- **diagrams.generic.network.VPN**
+
+<img width="30" src="/img/resources/generic/network/firewall.png" alt="Firewall" style="float: left; padding-right: 5px;" >
+**diagrams.generic.network.Firewall**
+
+<img width="30" src="/img/resources/generic/network/router.png" alt="Router" style="float: left; padding-right: 5px;" >
+**diagrams.generic.network.Router**
+
+<img width="30" src="/img/resources/generic/network/subnet.png" alt="Subnet" style="float: left; padding-right: 5px;" >
+**diagrams.generic.network.Subnet**
+
+<img width="30" src="/img/resources/generic/network/switch.png" alt="Switch" style="float: left; padding-right: 5px;" >
+**diagrams.generic.network.Switch**
+
+<img width="30" src="/img/resources/generic/network/vpn.png" alt="VPN" style="float: left; padding-right: 5px;" >
+**diagrams.generic.network.VPN**
 
 ## generic.os
 
-- **diagrams.generic.os.Android**
-- **diagrams.generic.os.Centos**
-- **diagrams.generic.os.Debian**
-- **diagrams.generic.os.IOS**
-- **diagrams.generic.os.LinuxGeneral**
-- **diagrams.generic.os.Raspbian**
-- **diagrams.generic.os.Suse**
-- **diagrams.generic.os.Ubuntu**
-- **diagrams.generic.os.Windows**
+
+<img width="30" src="/img/resources/generic/os/android.png" alt="Android" style="float: left; padding-right: 5px;" >
+**diagrams.generic.os.Android**
+
+<img width="30" src="/img/resources/generic/os/centos.png" alt="Centos" style="float: left; padding-right: 5px;" >
+**diagrams.generic.os.Centos**
+
+<img width="30" src="/img/resources/generic/os/debian.png" alt="Debian" style="float: left; padding-right: 5px;" >
+**diagrams.generic.os.Debian**
+
+<img width="30" src="/img/resources/generic/os/ios.png" alt="IOS" style="float: left; padding-right: 5px;" >
+**diagrams.generic.os.IOS**
+
+<img width="30" src="/img/resources/generic/os/linux-general.png" alt="LinuxGeneral" style="float: left; padding-right: 5px;" >
+**diagrams.generic.os.LinuxGeneral**
+
+<img width="30" src="/img/resources/generic/os/raspbian.png" alt="Raspbian" style="float: left; padding-right: 5px;" >
+**diagrams.generic.os.Raspbian**
+
+<img width="30" src="/img/resources/generic/os/suse.png" alt="Suse" style="float: left; padding-right: 5px;" >
+**diagrams.generic.os.Suse**
+
+<img width="30" src="/img/resources/generic/os/ubuntu.png" alt="Ubuntu" style="float: left; padding-right: 5px;" >
+**diagrams.generic.os.Ubuntu**
+
+<img width="30" src="/img/resources/generic/os/windows.png" alt="Windows" style="float: left; padding-right: 5px;" >
+**diagrams.generic.os.Windows**
 
 ## generic.place
 
-- **diagrams.generic.place.Datacenter**
+
+<img width="30" src="/img/resources/generic/place/datacenter.png" alt="Datacenter" style="float: left; padding-right: 5px;" >
+**diagrams.generic.place.Datacenter**
 
 ## generic.storage
 
-- **diagrams.generic.storage.Storage**
+
+<img width="30" src="/img/resources/generic/storage/storage.png" alt="Storage" style="float: left; padding-right: 5px;" >
+**diagrams.generic.storage.Storage**
 
 ## generic.virtualization
 
-- **diagrams.generic.virtualization.Virtualbox**
-- **diagrams.generic.virtualization.Vmware**
-- **diagrams.generic.virtualization.XEN**
+
+<img width="30" src="/img/resources/generic/virtualization/virtualbox.png" alt="Virtualbox" style="float: left; padding-right: 5px;" >
+**diagrams.generic.virtualization.Virtualbox**
+
+<img width="30" src="/img/resources/generic/virtualization/vmware.png" alt="Vmware" style="float: left; padding-right: 5px;" >
+**diagrams.generic.virtualization.Vmware**
+
+<img width="30" src="/img/resources/generic/virtualization/xen.png" alt="XEN" style="float: left; padding-right: 5px;" >
+**diagrams.generic.virtualization.XEN**

docs/nodes/ibm.md

@@ -7,222 +7,582 @@ Node classes list of ibm provider.
 
 ## ibm.analytics
 
-- **diagrams.ibm.analytics.Analytics**
-- **diagrams.ibm.analytics.DataIntegration**
-- **diagrams.ibm.analytics.DataRepositories**
-- **diagrams.ibm.analytics.DeviceAnalytics**
-- **diagrams.ibm.analytics.StreamingComputing**
+
+<img width="30" src="/img/resources/ibm/analytics/analytics.png" alt="Analytics" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.analytics.Analytics**
+
+<img width="30" src="/img/resources/ibm/analytics/data-integration.png" alt="DataIntegration" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.analytics.DataIntegration**
+
+<img width="30" src="/img/resources/ibm/analytics/data-repositories.png" alt="DataRepositories" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.analytics.DataRepositories**
+
+<img width="30" src="/img/resources/ibm/analytics/device-analytics.png" alt="DeviceAnalytics" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.analytics.DeviceAnalytics**
+
+<img width="30" src="/img/resources/ibm/analytics/streaming-computing.png" alt="StreamingComputing" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.analytics.StreamingComputing**
 
 ## ibm.applications
 
-- **diagrams.ibm.applications.ActionableInsight**
-- **diagrams.ibm.applications.Annotate**
-- **diagrams.ibm.applications.ApiDeveloperPortal**
-- **diagrams.ibm.applications.ApiPolyglotRuntimes**
-- **diagrams.ibm.applications.AppServer**
-- **diagrams.ibm.applications.ApplicationLogic**
-- **diagrams.ibm.applications.EnterpriseApplications**
-- **diagrams.ibm.applications.Index**
-- **diagrams.ibm.applications.IotApplication**
-- **diagrams.ibm.applications.Microservice**
-- **diagrams.ibm.applications.MobileApp**
-- **diagrams.ibm.applications.Ontology**
-- **diagrams.ibm.applications.OpenSourceTools**
-- **diagrams.ibm.applications.RuntimeServices**
-- **diagrams.ibm.applications.SaasApplications**
-- **diagrams.ibm.applications.ServiceBroker**
-- **diagrams.ibm.applications.SpeechToText**
-- **diagrams.ibm.applications.VisualRecognition**
-- **diagrams.ibm.applications.Visualization**
+
+<img width="30" src="/img/resources/ibm/applications/actionable-insight.png" alt="ActionableInsight" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.ActionableInsight**
+
+<img width="30" src="/img/resources/ibm/applications/annotate.png" alt="Annotate" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.Annotate**
+
+<img width="30" src="/img/resources/ibm/applications/api-developer-portal.png" alt="ApiDeveloperPortal" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.ApiDeveloperPortal**
+
+<img width="30" src="/img/resources/ibm/applications/api-polyglot-runtimes.png" alt="ApiPolyglotRuntimes" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.ApiPolyglotRuntimes**
+
+<img width="30" src="/img/resources/ibm/applications/app-server.png" alt="AppServer" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.AppServer**
+
+<img width="30" src="/img/resources/ibm/applications/application-logic.png" alt="ApplicationLogic" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.ApplicationLogic**
+
+<img width="30" src="/img/resources/ibm/applications/enterprise-applications.png" alt="EnterpriseApplications" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.EnterpriseApplications**
+
+<img width="30" src="/img/resources/ibm/applications/index.png" alt="Index" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.Index**
+
+<img width="30" src="/img/resources/ibm/applications/iot-application.png" alt="IotApplication" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.IotApplication**
+
+<img width="30" src="/img/resources/ibm/applications/microservice.png" alt="Microservice" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.Microservice**
+
+<img width="30" src="/img/resources/ibm/applications/mobile-app.png" alt="MobileApp" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.MobileApp**
+
+<img width="30" src="/img/resources/ibm/applications/ontology.png" alt="Ontology" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.Ontology**
+
+<img width="30" src="/img/resources/ibm/applications/open-source-tools.png" alt="OpenSourceTools" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.OpenSourceTools**
+
+<img width="30" src="/img/resources/ibm/applications/runtime-services.png" alt="RuntimeServices" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.RuntimeServices**
+
+<img width="30" src="/img/resources/ibm/applications/saas-applications.png" alt="SaasApplications" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.SaasApplications**
+
+<img width="30" src="/img/resources/ibm/applications/service-broker.png" alt="ServiceBroker" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.ServiceBroker**
+
+<img width="30" src="/img/resources/ibm/applications/speech-to-text.png" alt="SpeechToText" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.SpeechToText**
+
+<img width="30" src="/img/resources/ibm/applications/visual-recognition.png" alt="VisualRecognition" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.VisualRecognition**
+
+<img width="30" src="/img/resources/ibm/applications/visualization.png" alt="Visualization" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.applications.Visualization**
 
 ## ibm.blockchain
 
-- **diagrams.ibm.blockchain.BlockchainDeveloper**
-- **diagrams.ibm.blockchain.Blockchain**
-- **diagrams.ibm.blockchain.CertificateAuthority**
-- **diagrams.ibm.blockchain.ClientApplication**
-- **diagrams.ibm.blockchain.Communication**
-- **diagrams.ibm.blockchain.Consensus**
-- **diagrams.ibm.blockchain.EventListener**
-- **diagrams.ibm.blockchain.Event**
-- **diagrams.ibm.blockchain.ExistingEnterpriseSystems**
-- **diagrams.ibm.blockchain.HyperledgerFabric**
-- **diagrams.ibm.blockchain.KeyManagement**
-- **diagrams.ibm.blockchain.Ledger**
-- **diagrams.ibm.blockchain.MembershipServicesProviderApi**
-- **diagrams.ibm.blockchain.Membership**
-- **diagrams.ibm.blockchain.MessageBus**
-- **diagrams.ibm.blockchain.Node**
-- **diagrams.ibm.blockchain.Services**
-- **diagrams.ibm.blockchain.SmartContract**
-- **diagrams.ibm.blockchain.TransactionManager**
-- **diagrams.ibm.blockchain.Wallet**
+
+<img width="30" src="/img/resources/ibm/blockchain/blockchain-developer.png" alt="BlockchainDeveloper" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.BlockchainDeveloper**
+
+<img width="30" src="/img/resources/ibm/blockchain/blockchain.png" alt="Blockchain" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.Blockchain**
+
+<img width="30" src="/img/resources/ibm/blockchain/certificate-authority.png" alt="CertificateAuthority" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.CertificateAuthority**
+
+<img width="30" src="/img/resources/ibm/blockchain/client-application.png" alt="ClientApplication" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.ClientApplication**
+
+<img width="30" src="/img/resources/ibm/blockchain/communication.png" alt="Communication" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.Communication**
+
+<img width="30" src="/img/resources/ibm/blockchain/consensus.png" alt="Consensus" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.Consensus**
+
+<img width="30" src="/img/resources/ibm/blockchain/event-listener.png" alt="EventListener" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.EventListener**
+
+<img width="30" src="/img/resources/ibm/blockchain/event.png" alt="Event" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.Event**
+
+<img width="30" src="/img/resources/ibm/blockchain/existing-enterprise-systems.png" alt="ExistingEnterpriseSystems" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.ExistingEnterpriseSystems**
+
+<img width="30" src="/img/resources/ibm/blockchain/hyperledger-fabric.png" alt="HyperledgerFabric" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.HyperledgerFabric**
+
+<img width="30" src="/img/resources/ibm/blockchain/key-management.png" alt="KeyManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.KeyManagement**
+
+<img width="30" src="/img/resources/ibm/blockchain/ledger.png" alt="Ledger" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.Ledger**
+
+<img width="30" src="/img/resources/ibm/blockchain/membership-services-provider-api.png" alt="MembershipServicesProviderApi" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.MembershipServicesProviderApi**
+
+<img width="30" src="/img/resources/ibm/blockchain/membership.png" alt="Membership" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.Membership**
+
+<img width="30" src="/img/resources/ibm/blockchain/message-bus.png" alt="MessageBus" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.MessageBus**
+
+<img width="30" src="/img/resources/ibm/blockchain/node.png" alt="Node" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.Node**
+
+<img width="30" src="/img/resources/ibm/blockchain/services.png" alt="Services" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.Services**
+
+<img width="30" src="/img/resources/ibm/blockchain/smart-contract.png" alt="SmartContract" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.SmartContract**
+
+<img width="30" src="/img/resources/ibm/blockchain/transaction-manager.png" alt="TransactionManager" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.TransactionManager**
+
+<img width="30" src="/img/resources/ibm/blockchain/wallet.png" alt="Wallet" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.blockchain.Wallet**
 
 ## ibm.compute
 
-- **diagrams.ibm.compute.BareMetalServer**
-- **diagrams.ibm.compute.ImageService**
-- **diagrams.ibm.compute.Instance**
-- **diagrams.ibm.compute.Key**
-- **diagrams.ibm.compute.PowerInstance**
+
+<img width="30" src="/img/resources/ibm/compute/bare-metal-server.png" alt="BareMetalServer" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.compute.BareMetalServer**
+
+<img width="30" src="/img/resources/ibm/compute/image-service.png" alt="ImageService" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.compute.ImageService**
+
+<img width="30" src="/img/resources/ibm/compute/instance.png" alt="Instance" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.compute.Instance**
+
+<img width="30" src="/img/resources/ibm/compute/key.png" alt="Key" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.compute.Key**
+
+<img width="30" src="/img/resources/ibm/compute/power-instance.png" alt="PowerInstance" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.compute.PowerInstance**
 
 ## ibm.data
 
-- **diagrams.ibm.data.Caches**
-- **diagrams.ibm.data.Cloud**
-- **diagrams.ibm.data.ConversationTrainedDeployed**
-- **diagrams.ibm.data.DataServices**
-- **diagrams.ibm.data.DataSources**
-- **diagrams.ibm.data.DeviceIdentityService**
-- **diagrams.ibm.data.DeviceRegistry**
-- **diagrams.ibm.data.EnterpriseData**
-- **diagrams.ibm.data.EnterpriseUserDirectory**
-- **diagrams.ibm.data.FileRepository**
-- **diagrams.ibm.data.GroundTruth**
-- **diagrams.ibm.data.Model**
-- **diagrams.ibm.data.TmsDataInterface**
+
+<img width="30" src="/img/resources/ibm/data/caches.png" alt="Caches" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.Caches**
+
+<img width="30" src="/img/resources/ibm/data/cloud.png" alt="Cloud" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.Cloud**
+
+<img width="30" src="/img/resources/ibm/data/conversation-trained-deployed.png" alt="ConversationTrainedDeployed" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.ConversationTrainedDeployed**
+
+<img width="30" src="/img/resources/ibm/data/data-services.png" alt="DataServices" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.DataServices**
+
+<img width="30" src="/img/resources/ibm/data/data-sources.png" alt="DataSources" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.DataSources**
+
+<img width="30" src="/img/resources/ibm/data/device-identity-service.png" alt="DeviceIdentityService" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.DeviceIdentityService**
+
+<img width="30" src="/img/resources/ibm/data/device-registry.png" alt="DeviceRegistry" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.DeviceRegistry**
+
+<img width="30" src="/img/resources/ibm/data/enterprise-data.png" alt="EnterpriseData" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.EnterpriseData**
+
+<img width="30" src="/img/resources/ibm/data/enterprise-user-directory.png" alt="EnterpriseUserDirectory" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.EnterpriseUserDirectory**
+
+<img width="30" src="/img/resources/ibm/data/file-repository.png" alt="FileRepository" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.FileRepository**
+
+<img width="30" src="/img/resources/ibm/data/ground-truth.png" alt="GroundTruth" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.GroundTruth**
+
+<img width="30" src="/img/resources/ibm/data/model.png" alt="Model" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.Model**
+
+<img width="30" src="/img/resources/ibm/data/tms-data-interface.png" alt="TmsDataInterface" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.data.TmsDataInterface**
 
 ## ibm.devops
 
-- **diagrams.ibm.devops.ArtifactManagement**
-- **diagrams.ibm.devops.BuildTest**
-- **diagrams.ibm.devops.CodeEditor**
-- **diagrams.ibm.devops.CollaborativeDevelopment**
-- **diagrams.ibm.devops.ConfigurationManagement**
-- **diagrams.ibm.devops.ContinuousDeploy**
-- **diagrams.ibm.devops.ContinuousTesting**
-- **diagrams.ibm.devops.Devops**
-- **diagrams.ibm.devops.Provision**
-- **diagrams.ibm.devops.ReleaseManagement**
+
+<img width="30" src="/img/resources/ibm/devops/artifact-management.png" alt="ArtifactManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.devops.ArtifactManagement**
+
+<img width="30" src="/img/resources/ibm/devops/build-test.png" alt="BuildTest" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.devops.BuildTest**
+
+<img width="30" src="/img/resources/ibm/devops/code-editor.png" alt="CodeEditor" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.devops.CodeEditor**
+
+<img width="30" src="/img/resources/ibm/devops/collaborative-development.png" alt="CollaborativeDevelopment" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.devops.CollaborativeDevelopment**
+
+<img width="30" src="/img/resources/ibm/devops/configuration-management.png" alt="ConfigurationManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.devops.ConfigurationManagement**
+
+<img width="30" src="/img/resources/ibm/devops/continuous-deploy.png" alt="ContinuousDeploy" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.devops.ContinuousDeploy**
+
+<img width="30" src="/img/resources/ibm/devops/continuous-testing.png" alt="ContinuousTesting" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.devops.ContinuousTesting**
+
+<img width="30" src="/img/resources/ibm/devops/devops.png" alt="Devops" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.devops.Devops**
+
+<img width="30" src="/img/resources/ibm/devops/provision.png" alt="Provision" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.devops.Provision**
+
+<img width="30" src="/img/resources/ibm/devops/release-management.png" alt="ReleaseManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.devops.ReleaseManagement**
 
 ## ibm.general
 
-- **diagrams.ibm.general.CloudMessaging**
-- **diagrams.ibm.general.CloudServices**
-- **diagrams.ibm.general.Cloudant**
-- **diagrams.ibm.general.CognitiveServices**
-- **diagrams.ibm.general.DataSecurity**
-- **diagrams.ibm.general.Enterprise**
-- **diagrams.ibm.general.GovernanceRiskCompliance**
-- **diagrams.ibm.general.IBMContainers**
-- **diagrams.ibm.general.IBMPublicCloud**
-- **diagrams.ibm.general.IdentityAccessManagement**
-- **diagrams.ibm.general.IdentityProvider**
-- **diagrams.ibm.general.InfrastructureSecurity**
-- **diagrams.ibm.general.Internet**
-- **diagrams.ibm.general.IotCloud**
-- **diagrams.ibm.general.MicroservicesApplication**
-- **diagrams.ibm.general.MicroservicesMesh**
-- **diagrams.ibm.general.MonitoringLogging**
-- **diagrams.ibm.general.Monitoring**
-- **diagrams.ibm.general.ObjectStorage**
-- **diagrams.ibm.general.OfflineCapabilities**
-- **diagrams.ibm.general.Openwhisk**
-- **diagrams.ibm.general.PeerCloud**
-- **diagrams.ibm.general.RetrieveRank**
-- **diagrams.ibm.general.Scalable**
-- **diagrams.ibm.general.ServiceDiscoveryConfiguration**
-- **diagrams.ibm.general.TextToSpeech**
-- **diagrams.ibm.general.TransformationConnectivity**
+
+<img width="30" src="/img/resources/ibm/general/cloud-messaging.png" alt="CloudMessaging" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.CloudMessaging**
+
+<img width="30" src="/img/resources/ibm/general/cloud-services.png" alt="CloudServices" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.CloudServices**
+
+<img width="30" src="/img/resources/ibm/general/cloudant.png" alt="Cloudant" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.Cloudant**
+
+<img width="30" src="/img/resources/ibm/general/cognitive-services.png" alt="CognitiveServices" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.CognitiveServices**
+
+<img width="30" src="/img/resources/ibm/general/data-security.png" alt="DataSecurity" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.DataSecurity**
+
+<img width="30" src="/img/resources/ibm/general/enterprise.png" alt="Enterprise" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.Enterprise**
+
+<img width="30" src="/img/resources/ibm/general/governance-risk-compliance.png" alt="GovernanceRiskCompliance" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.GovernanceRiskCompliance**
+
+<img width="30" src="/img/resources/ibm/general/ibm-containers.png" alt="IBMContainers" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.IBMContainers**
+
+<img width="30" src="/img/resources/ibm/general/ibm-public-cloud.png" alt="IBMPublicCloud" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.IBMPublicCloud**
+
+<img width="30" src="/img/resources/ibm/general/identity-access-management.png" alt="IdentityAccessManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.IdentityAccessManagement**
+
+<img width="30" src="/img/resources/ibm/general/identity-provider.png" alt="IdentityProvider" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.IdentityProvider**
+
+<img width="30" src="/img/resources/ibm/general/infrastructure-security.png" alt="InfrastructureSecurity" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.InfrastructureSecurity**
+
+<img width="30" src="/img/resources/ibm/general/internet.png" alt="Internet" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.Internet**
+
+<img width="30" src="/img/resources/ibm/general/iot-cloud.png" alt="IotCloud" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.IotCloud**
+
+<img width="30" src="/img/resources/ibm/general/microservices-application.png" alt="MicroservicesApplication" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.MicroservicesApplication**
+
+<img width="30" src="/img/resources/ibm/general/microservices-mesh.png" alt="MicroservicesMesh" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.MicroservicesMesh**
+
+<img width="30" src="/img/resources/ibm/general/monitoring-logging.png" alt="MonitoringLogging" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.MonitoringLogging**
+
+<img width="30" src="/img/resources/ibm/general/monitoring.png" alt="Monitoring" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.Monitoring**
+
+<img width="30" src="/img/resources/ibm/general/object-storage.png" alt="ObjectStorage" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.ObjectStorage**
+
+<img width="30" src="/img/resources/ibm/general/offline-capabilities.png" alt="OfflineCapabilities" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.OfflineCapabilities**
+
+<img width="30" src="/img/resources/ibm/general/openwhisk.png" alt="Openwhisk" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.Openwhisk**
+
+<img width="30" src="/img/resources/ibm/general/peer-cloud.png" alt="PeerCloud" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.PeerCloud**
+
+<img width="30" src="/img/resources/ibm/general/retrieve-rank.png" alt="RetrieveRank" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.RetrieveRank**
+
+<img width="30" src="/img/resources/ibm/general/scalable.png" alt="Scalable" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.Scalable**
+
+<img width="30" src="/img/resources/ibm/general/service-discovery-configuration.png" alt="ServiceDiscoveryConfiguration" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.ServiceDiscoveryConfiguration**
+
+<img width="30" src="/img/resources/ibm/general/text-to-speech.png" alt="TextToSpeech" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.TextToSpeech**
+
+<img width="30" src="/img/resources/ibm/general/transformation-connectivity.png" alt="TransformationConnectivity" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.general.TransformationConnectivity**
 
 ## ibm.infrastructure
 
-- **diagrams.ibm.infrastructure.Channels**
-- **diagrams.ibm.infrastructure.CloudMessaging**
-- **diagrams.ibm.infrastructure.Dashboard**
-- **diagrams.ibm.infrastructure.Diagnostics**
-- **diagrams.ibm.infrastructure.EdgeServices**
-- **diagrams.ibm.infrastructure.EnterpriseMessaging**
-- **diagrams.ibm.infrastructure.EventFeed**
-- **diagrams.ibm.infrastructure.InfrastructureServices**
-- **diagrams.ibm.infrastructure.InterserviceCommunication**
-- **diagrams.ibm.infrastructure.LoadBalancingRouting**
-- **diagrams.ibm.infrastructure.MicroservicesMesh**
-- **diagrams.ibm.infrastructure.MobileBackend**
-- **diagrams.ibm.infrastructure.MobileProviderNetwork**
-- **diagrams.ibm.infrastructure.MonitoringLogging**
-- **diagrams.ibm.infrastructure.Monitoring**
-- **diagrams.ibm.infrastructure.PeerServices**
-- **diagrams.ibm.infrastructure.ServiceDiscoveryConfiguration**
-- **diagrams.ibm.infrastructure.TransformationConnectivity**
+
+<img width="30" src="/img/resources/ibm/infrastructure/channels.png" alt="Channels" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.Channels**
+
+<img width="30" src="/img/resources/ibm/infrastructure/cloud-messaging.png" alt="CloudMessaging" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.CloudMessaging**
+
+<img width="30" src="/img/resources/ibm/infrastructure/dashboard.png" alt="Dashboard" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.Dashboard**
+
+<img width="30" src="/img/resources/ibm/infrastructure/diagnostics.png" alt="Diagnostics" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.Diagnostics**
+
+<img width="30" src="/img/resources/ibm/infrastructure/edge-services.png" alt="EdgeServices" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.EdgeServices**
+
+<img width="30" src="/img/resources/ibm/infrastructure/enterprise-messaging.png" alt="EnterpriseMessaging" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.EnterpriseMessaging**
+
+<img width="30" src="/img/resources/ibm/infrastructure/event-feed.png" alt="EventFeed" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.EventFeed**
+
+<img width="30" src="/img/resources/ibm/infrastructure/infrastructure-services.png" alt="InfrastructureServices" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.InfrastructureServices**
+
+<img width="30" src="/img/resources/ibm/infrastructure/interservice-communication.png" alt="InterserviceCommunication" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.InterserviceCommunication**
+
+<img width="30" src="/img/resources/ibm/infrastructure/load-balancing-routing.png" alt="LoadBalancingRouting" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.LoadBalancingRouting**
+
+<img width="30" src="/img/resources/ibm/infrastructure/microservices-mesh.png" alt="MicroservicesMesh" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.MicroservicesMesh**
+
+<img width="30" src="/img/resources/ibm/infrastructure/mobile-backend.png" alt="MobileBackend" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.MobileBackend**
+
+<img width="30" src="/img/resources/ibm/infrastructure/mobile-provider-network.png" alt="MobileProviderNetwork" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.MobileProviderNetwork**
+
+<img width="30" src="/img/resources/ibm/infrastructure/monitoring-logging.png" alt="MonitoringLogging" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.MonitoringLogging**
+
+<img width="30" src="/img/resources/ibm/infrastructure/monitoring.png" alt="Monitoring" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.Monitoring**
+
+<img width="30" src="/img/resources/ibm/infrastructure/peer-services.png" alt="PeerServices" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.PeerServices**
+
+<img width="30" src="/img/resources/ibm/infrastructure/service-discovery-configuration.png" alt="ServiceDiscoveryConfiguration" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.ServiceDiscoveryConfiguration**
+
+<img width="30" src="/img/resources/ibm/infrastructure/transformation-connectivity.png" alt="TransformationConnectivity" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.infrastructure.TransformationConnectivity**
 
 ## ibm.management
 
-- **diagrams.ibm.management.AlertNotification**
-- **diagrams.ibm.management.ApiManagement**
-- **diagrams.ibm.management.CloudManagement**
-- **diagrams.ibm.management.ClusterManagement**
-- **diagrams.ibm.management.ContentManagement**
-- **diagrams.ibm.management.DataServices**
-- **diagrams.ibm.management.DeviceManagement**
-- **diagrams.ibm.management.InformationGovernance**
-- **diagrams.ibm.management.ItServiceManagement**
-- **diagrams.ibm.management.Management**
-- **diagrams.ibm.management.MonitoringMetrics**
-- **diagrams.ibm.management.ProcessManagement**
-- **diagrams.ibm.management.ProviderCloudPortalService**
-- **diagrams.ibm.management.PushNotifications**
-- **diagrams.ibm.management.ServiceManagementTools**
+
+<img width="30" src="/img/resources/ibm/management/alert-notification.png" alt="AlertNotification" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.AlertNotification**
+
+<img width="30" src="/img/resources/ibm/management/api-management.png" alt="ApiManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.ApiManagement**
+
+<img width="30" src="/img/resources/ibm/management/cloud-management.png" alt="CloudManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.CloudManagement**
+
+<img width="30" src="/img/resources/ibm/management/cluster-management.png" alt="ClusterManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.ClusterManagement**
+
+<img width="30" src="/img/resources/ibm/management/content-management.png" alt="ContentManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.ContentManagement**
+
+<img width="30" src="/img/resources/ibm/management/data-services.png" alt="DataServices" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.DataServices**
+
+<img width="30" src="/img/resources/ibm/management/device-management.png" alt="DeviceManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.DeviceManagement**
+
+<img width="30" src="/img/resources/ibm/management/information-governance.png" alt="InformationGovernance" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.InformationGovernance**
+
+<img width="30" src="/img/resources/ibm/management/it-service-management.png" alt="ItServiceManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.ItServiceManagement**
+
+<img width="30" src="/img/resources/ibm/management/management.png" alt="Management" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.Management**
+
+<img width="30" src="/img/resources/ibm/management/monitoring-metrics.png" alt="MonitoringMetrics" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.MonitoringMetrics**
+
+<img width="30" src="/img/resources/ibm/management/process-management.png" alt="ProcessManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.ProcessManagement**
+
+<img width="30" src="/img/resources/ibm/management/provider-cloud-portal-service.png" alt="ProviderCloudPortalService" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.ProviderCloudPortalService**
+
+<img width="30" src="/img/resources/ibm/management/push-notifications.png" alt="PushNotifications" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.PushNotifications**
+
+<img width="30" src="/img/resources/ibm/management/service-management-tools.png" alt="ServiceManagementTools" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.management.ServiceManagementTools**
 
 ## ibm.network
 
-- **diagrams.ibm.network.Bridge**
-- **diagrams.ibm.network.DirectLink**
-- **diagrams.ibm.network.Enterprise**
-- **diagrams.ibm.network.Firewall**
-- **diagrams.ibm.network.FloatingIp**
-- **diagrams.ibm.network.Gateway**
-- **diagrams.ibm.network.InternetServices**
-- **diagrams.ibm.network.LoadBalancerListener**
-- **diagrams.ibm.network.LoadBalancerPool**
-- **diagrams.ibm.network.LoadBalancer**
-- **diagrams.ibm.network.LoadBalancingRouting**
-- **diagrams.ibm.network.PublicGateway**
-- **diagrams.ibm.network.Region**
-- **diagrams.ibm.network.Router**
-- **diagrams.ibm.network.Rules**
-- **diagrams.ibm.network.Subnet**
-- **diagrams.ibm.network.TransitGateway**
-- **diagrams.ibm.network.Vpc**
-- **diagrams.ibm.network.VpnConnection**
-- **diagrams.ibm.network.VpnGateway**
-- **diagrams.ibm.network.VpnPolicy**
+
+<img width="30" src="/img/resources/ibm/network/bridge.png" alt="Bridge" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.Bridge**
+
+<img width="30" src="/img/resources/ibm/network/direct-link.png" alt="DirectLink" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.DirectLink**
+
+<img width="30" src="/img/resources/ibm/network/enterprise.png" alt="Enterprise" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.Enterprise**
+
+<img width="30" src="/img/resources/ibm/network/firewall.png" alt="Firewall" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.Firewall**
+
+<img width="30" src="/img/resources/ibm/network/floating-ip.png" alt="FloatingIp" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.FloatingIp**
+
+<img width="30" src="/img/resources/ibm/network/gateway.png" alt="Gateway" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.Gateway**
+
+<img width="30" src="/img/resources/ibm/network/internet-services.png" alt="InternetServices" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.InternetServices**
+
+<img width="30" src="/img/resources/ibm/network/load-balancer-listener.png" alt="LoadBalancerListener" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.LoadBalancerListener**
+
+<img width="30" src="/img/resources/ibm/network/load-balancer-pool.png" alt="LoadBalancerPool" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.LoadBalancerPool**
+
+<img width="30" src="/img/resources/ibm/network/load-balancer.png" alt="LoadBalancer" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.LoadBalancer**
+
+<img width="30" src="/img/resources/ibm/network/load-balancing-routing.png" alt="LoadBalancingRouting" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.LoadBalancingRouting**
+
+<img width="30" src="/img/resources/ibm/network/public-gateway.png" alt="PublicGateway" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.PublicGateway**
+
+<img width="30" src="/img/resources/ibm/network/region.png" alt="Region" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.Region**
+
+<img width="30" src="/img/resources/ibm/network/router.png" alt="Router" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.Router**
+
+<img width="30" src="/img/resources/ibm/network/rules.png" alt="Rules" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.Rules**
+
+<img width="30" src="/img/resources/ibm/network/subnet.png" alt="Subnet" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.Subnet**
+
+<img width="30" src="/img/resources/ibm/network/transit-gateway.png" alt="TransitGateway" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.TransitGateway**
+
+<img width="30" src="/img/resources/ibm/network/vpc.png" alt="Vpc" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.Vpc**
+
+<img width="30" src="/img/resources/ibm/network/vpn-connection.png" alt="VpnConnection" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.VpnConnection**
+
+<img width="30" src="/img/resources/ibm/network/vpn-gateway.png" alt="VpnGateway" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.VpnGateway**
+
+<img width="30" src="/img/resources/ibm/network/vpn-policy.png" alt="VpnPolicy" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.network.VpnPolicy**
 
 ## ibm.security
 
-- **diagrams.ibm.security.ApiSecurity**
-- **diagrams.ibm.security.BlockchainSecurityService**
-- **diagrams.ibm.security.DataSecurity**
-- **diagrams.ibm.security.Firewall**
-- **diagrams.ibm.security.Gateway**
-- **diagrams.ibm.security.GovernanceRiskCompliance**
-- **diagrams.ibm.security.IdentityAccessManagement**
-- **diagrams.ibm.security.IdentityProvider**
-- **diagrams.ibm.security.InfrastructureSecurity**
-- **diagrams.ibm.security.PhysicalSecurity**
-- **diagrams.ibm.security.SecurityMonitoringIntelligence**
-- **diagrams.ibm.security.SecurityServices**
-- **diagrams.ibm.security.TrustendComputing**
-- **diagrams.ibm.security.Vpn**
+
+<img width="30" src="/img/resources/ibm/security/api-security.png" alt="ApiSecurity" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.ApiSecurity**
+
+<img width="30" src="/img/resources/ibm/security/blockchain-security-service.png" alt="BlockchainSecurityService" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.BlockchainSecurityService**
+
+<img width="30" src="/img/resources/ibm/security/data-security.png" alt="DataSecurity" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.DataSecurity**
+
+<img width="30" src="/img/resources/ibm/security/firewall.png" alt="Firewall" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.Firewall**
+
+<img width="30" src="/img/resources/ibm/security/gateway.png" alt="Gateway" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.Gateway**
+
+<img width="30" src="/img/resources/ibm/security/governance-risk-compliance.png" alt="GovernanceRiskCompliance" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.GovernanceRiskCompliance**
+
+<img width="30" src="/img/resources/ibm/security/identity-access-management.png" alt="IdentityAccessManagement" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.IdentityAccessManagement**
+
+<img width="30" src="/img/resources/ibm/security/identity-provider.png" alt="IdentityProvider" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.IdentityProvider**
+
+<img width="30" src="/img/resources/ibm/security/infrastructure-security.png" alt="InfrastructureSecurity" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.InfrastructureSecurity**
+
+<img width="30" src="/img/resources/ibm/security/physical-security.png" alt="PhysicalSecurity" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.PhysicalSecurity**
+
+<img width="30" src="/img/resources/ibm/security/security-monitoring-intelligence.png" alt="SecurityMonitoringIntelligence" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.SecurityMonitoringIntelligence**
+
+<img width="30" src="/img/resources/ibm/security/security-services.png" alt="SecurityServices" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.SecurityServices**
+
+<img width="30" src="/img/resources/ibm/security/trustend-computing.png" alt="TrustendComputing" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.TrustendComputing**
+
+<img width="30" src="/img/resources/ibm/security/vpn.png" alt="Vpn" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.security.Vpn**
 
 ## ibm.social
 
-- **diagrams.ibm.social.Communities**
-- **diagrams.ibm.social.FileSync**
-- **diagrams.ibm.social.LiveCollaboration**
-- **diagrams.ibm.social.Messaging**
-- **diagrams.ibm.social.Networking**
+
+<img width="30" src="/img/resources/ibm/social/communities.png" alt="Communities" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.social.Communities**
+
+<img width="30" src="/img/resources/ibm/social/file-sync.png" alt="FileSync" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.social.FileSync**
+
+<img width="30" src="/img/resources/ibm/social/live-collaboration.png" alt="LiveCollaboration" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.social.LiveCollaboration**
+
+<img width="30" src="/img/resources/ibm/social/messaging.png" alt="Messaging" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.social.Messaging**
+
+<img width="30" src="/img/resources/ibm/social/networking.png" alt="Networking" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.social.Networking**
 
 ## ibm.storage
 
-- **diagrams.ibm.storage.BlockStorage**
-- **diagrams.ibm.storage.ObjectStorage**
+
+<img width="30" src="/img/resources/ibm/storage/block-storage.png" alt="BlockStorage" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.storage.BlockStorage**
+
+<img width="30" src="/img/resources/ibm/storage/object-storage.png" alt="ObjectStorage" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.storage.ObjectStorage**
 
 ## ibm.user
 
-- **diagrams.ibm.user.Browser**
-- **diagrams.ibm.user.Device**
-- **diagrams.ibm.user.IntegratedDigitalExperiences**
-- **diagrams.ibm.user.PhysicalEntity**
-- **diagrams.ibm.user.Sensor**
-- **diagrams.ibm.user.User**
+
+<img width="30" src="/img/resources/ibm/user/browser.png" alt="Browser" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.user.Browser**
+
+<img width="30" src="/img/resources/ibm/user/device.png" alt="Device" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.user.Device**
+
+<img width="30" src="/img/resources/ibm/user/integrated-digital-experiences.png" alt="IntegratedDigitalExperiences" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.user.IntegratedDigitalExperiences**
+
+<img width="30" src="/img/resources/ibm/user/physical-entity.png" alt="PhysicalEntity" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.user.PhysicalEntity**
+
+<img width="30" src="/img/resources/ibm/user/sensor.png" alt="Sensor" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.user.Sensor**
+
+<img width="30" src="/img/resources/ibm/user/user.png" alt="User" style="float: left; padding-right: 5px;" >
+**diagrams.ibm.user.User**

docs/nodes/k8s.md

@@ -7,81 +7,171 @@ Node classes list of k8s provider.
 
 ## k8s.chaos
 
-- **diagrams.k8s.chaos.ChaosMesh**
-- **diagrams.k8s.chaos.LitmusChaos**
+
+<img width="30" src="/img/resources/k8s/chaos/chaos-mesh.png" alt="ChaosMesh" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.chaos.ChaosMesh**
+
+<img width="30" src="/img/resources/k8s/chaos/litmus-chaos.png" alt="LitmusChaos" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.chaos.LitmusChaos**
 
 ## k8s.clusterconfig
 
-- **diagrams.k8s.clusterconfig.HPA**, **HorizontalPodAutoscaler** (alias)
-- **diagrams.k8s.clusterconfig.Limits**, **LimitRange** (alias)
-- **diagrams.k8s.clusterconfig.Quota**
+
+<img width="30" src="/img/resources/k8s/clusterconfig/hpa.png" alt="HPA" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.clusterconfig.HPA**, **HorizontalPodAutoscaler** (alias)
+
+<img width="30" src="/img/resources/k8s/clusterconfig/limits.png" alt="Limits" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.clusterconfig.Limits**, **LimitRange** (alias)
+
+<img width="30" src="/img/resources/k8s/clusterconfig/quota.png" alt="Quota" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.clusterconfig.Quota**
 
 ## k8s.compute
 
-- **diagrams.k8s.compute.Cronjob**
-- **diagrams.k8s.compute.Deploy**, **Deployment** (alias)
-- **diagrams.k8s.compute.DS**, **DaemonSet** (alias)
-- **diagrams.k8s.compute.Job**
-- **diagrams.k8s.compute.Pod**
-- **diagrams.k8s.compute.RS**, **ReplicaSet** (alias)
-- **diagrams.k8s.compute.STS**, **StatefulSet** (alias)
+
+<img width="30" src="/img/resources/k8s/compute/cronjob.png" alt="Cronjob" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.compute.Cronjob**
+
+<img width="30" src="/img/resources/k8s/compute/deploy.png" alt="Deploy" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.compute.Deploy**, **Deployment** (alias)
+
+<img width="30" src="/img/resources/k8s/compute/ds.png" alt="DS" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.compute.DS**, **DaemonSet** (alias)
+
+<img width="30" src="/img/resources/k8s/compute/job.png" alt="Job" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.compute.Job**
+
+<img width="30" src="/img/resources/k8s/compute/pod.png" alt="Pod" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.compute.Pod**
+
+<img width="30" src="/img/resources/k8s/compute/rs.png" alt="RS" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.compute.RS**, **ReplicaSet** (alias)
+
+<img width="30" src="/img/resources/k8s/compute/sts.png" alt="STS" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.compute.STS**, **StatefulSet** (alias)
 
 ## k8s.controlplane
 
-- **diagrams.k8s.controlplane.API**, **APIServer** (alias)
-- **diagrams.k8s.controlplane.CCM**
-- **diagrams.k8s.controlplane.CM**, **ControllerManager** (alias)
-- **diagrams.k8s.controlplane.KProxy**, **KubeProxy** (alias)
-- **diagrams.k8s.controlplane.Kubelet**
-- **diagrams.k8s.controlplane.Sched**, **Scheduler** (alias)
+
+<img width="30" src="/img/resources/k8s/controlplane/api.png" alt="API" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.controlplane.API**, **APIServer** (alias)
+
+<img width="30" src="/img/resources/k8s/controlplane/c-c-m.png" alt="CCM" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.controlplane.CCM**
+
+<img width="30" src="/img/resources/k8s/controlplane/c-m.png" alt="CM" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.controlplane.CM**, **ControllerManager** (alias)
+
+<img width="30" src="/img/resources/k8s/controlplane/k-proxy.png" alt="KProxy" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.controlplane.KProxy**, **KubeProxy** (alias)
+
+<img width="30" src="/img/resources/k8s/controlplane/kubelet.png" alt="Kubelet" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.controlplane.Kubelet**
+
+<img width="30" src="/img/resources/k8s/controlplane/sched.png" alt="Sched" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.controlplane.Sched**, **Scheduler** (alias)
 
 ## k8s.ecosystem
 
-- **diagrams.k8s.ecosystem.ExternalDns**
-- **diagrams.k8s.ecosystem.Helm**
-- **diagrams.k8s.ecosystem.Krew**
-- **diagrams.k8s.ecosystem.Kustomize**
+
+<img width="30" src="/img/resources/k8s/ecosystem/external-dns.png" alt="ExternalDns" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.ecosystem.ExternalDns**
+
+<img width="30" src="/img/resources/k8s/ecosystem/helm.png" alt="Helm" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.ecosystem.Helm**
+
+<img width="30" src="/img/resources/k8s/ecosystem/krew.png" alt="Krew" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.ecosystem.Krew**
+
+<img width="30" src="/img/resources/k8s/ecosystem/kustomize.png" alt="Kustomize" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.ecosystem.Kustomize**
 
 ## k8s.group
 
-- **diagrams.k8s.group.NS**, **Namespace** (alias)
+
+<img width="30" src="/img/resources/k8s/group/ns.png" alt="NS" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.group.NS**, **Namespace** (alias)
 
 ## k8s.infra
 
-- **diagrams.k8s.infra.ETCD**
-- **diagrams.k8s.infra.Master**
-- **diagrams.k8s.infra.Node**
+
+<img width="30" src="/img/resources/k8s/infra/etcd.png" alt="ETCD" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.infra.ETCD**
+
+<img width="30" src="/img/resources/k8s/infra/master.png" alt="Master" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.infra.Master**
+
+<img width="30" src="/img/resources/k8s/infra/node.png" alt="Node" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.infra.Node**
 
 ## k8s.network
 
-- **diagrams.k8s.network.Ep**, **Endpoint** (alias)
-- **diagrams.k8s.network.Ing**, **Ingress** (alias)
-- **diagrams.k8s.network.Netpol**, **NetworkPolicy** (alias)
-- **diagrams.k8s.network.SVC**, **Service** (alias)
+
+<img width="30" src="/img/resources/k8s/network/ep.png" alt="Ep" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.network.Ep**, **Endpoint** (alias)
+
+<img width="30" src="/img/resources/k8s/network/ing.png" alt="Ing" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.network.Ing**, **Ingress** (alias)
+
+<img width="30" src="/img/resources/k8s/network/netpol.png" alt="Netpol" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.network.Netpol**, **NetworkPolicy** (alias)
+
+<img width="30" src="/img/resources/k8s/network/svc.png" alt="SVC" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.network.SVC**, **Service** (alias)
 
 ## k8s.others
 
-- **diagrams.k8s.others.CRD**
-- **diagrams.k8s.others.PSP**
+
+<img width="30" src="/img/resources/k8s/others/crd.png" alt="CRD" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.others.CRD**
+
+<img width="30" src="/img/resources/k8s/others/psp.png" alt="PSP" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.others.PSP**
 
 ## k8s.podconfig
 
-- **diagrams.k8s.podconfig.CM**, **ConfigMap** (alias)
-- **diagrams.k8s.podconfig.Secret**
+
+<img width="30" src="/img/resources/k8s/podconfig/cm.png" alt="CM" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.podconfig.CM**, **ConfigMap** (alias)
+
+<img width="30" src="/img/resources/k8s/podconfig/secret.png" alt="Secret" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.podconfig.Secret**
 
 ## k8s.rbac
 
-- **diagrams.k8s.rbac.CRole**, **ClusterRole** (alias)
-- **diagrams.k8s.rbac.CRB**, **ClusterRoleBinding** (alias)
-- **diagrams.k8s.rbac.Group**
-- **diagrams.k8s.rbac.RB**, **RoleBinding** (alias)
-- **diagrams.k8s.rbac.Role**
-- **diagrams.k8s.rbac.SA**, **ServiceAccount** (alias)
-- **diagrams.k8s.rbac.User**
+
+<img width="30" src="/img/resources/k8s/rbac/c-role.png" alt="CRole" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.rbac.CRole**, **ClusterRole** (alias)
+
+<img width="30" src="/img/resources/k8s/rbac/crb.png" alt="CRB" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.rbac.CRB**, **ClusterRoleBinding** (alias)
+
+<img width="30" src="/img/resources/k8s/rbac/group.png" alt="Group" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.rbac.Group**
+
+<img width="30" src="/img/resources/k8s/rbac/rb.png" alt="RB" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.rbac.RB**, **RoleBinding** (alias)
+
+<img width="30" src="/img/resources/k8s/rbac/role.png" alt="Role" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.rbac.Role**
+
+<img width="30" src="/img/resources/k8s/rbac/sa.png" alt="SA" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.rbac.SA**, **ServiceAccount** (alias)
+
+<img width="30" src="/img/resources/k8s/rbac/user.png" alt="User" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.rbac.User**
 
 ## k8s.storage
 
-- **diagrams.k8s.storage.PV**, **PersistentVolume** (alias)
-- **diagrams.k8s.storage.PVC**, **PersistentVolumeClaim** (alias)
-- **diagrams.k8s.storage.SC**, **StorageClass** (alias)
-- **diagrams.k8s.storage.Vol**, **Volume** (alias)
+
+<img width="30" src="/img/resources/k8s/storage/pv.png" alt="PV" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.storage.PV**, **PersistentVolume** (alias)
+
+<img width="30" src="/img/resources/k8s/storage/pvc.png" alt="PVC" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.storage.PVC**, **PersistentVolumeClaim** (alias)
+
+<img width="30" src="/img/resources/k8s/storage/sc.png" alt="SC" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.storage.SC**, **StorageClass** (alias)
+
+<img width="30" src="/img/resources/k8s/storage/vol.png" alt="Vol" style="float: left; padding-right: 5px;" >
+**diagrams.k8s.storage.Vol**, **Volume** (alias)

docs/nodes/oci.md

@@ -7,167 +7,447 @@ Node classes list of oci provider.
 
 ## oci.compute
 
-- **diagrams.oci.compute.AutoscaleWhite**
-- **diagrams.oci.compute.Autoscale**
-- **diagrams.oci.compute.BMWhite**, **BareMetalWhite** (alias)
-- **diagrams.oci.compute.BM**, **BareMetal** (alias)
-- **diagrams.oci.compute.ContainerWhite**
-- **diagrams.oci.compute.Container**
-- **diagrams.oci.compute.FunctionsWhite**
-- **diagrams.oci.compute.Functions**
-- **diagrams.oci.compute.InstancePoolsWhite**
-- **diagrams.oci.compute.InstancePools**
-- **diagrams.oci.compute.OCIRWhite**, **OCIRegistryWhite** (alias)
-- **diagrams.oci.compute.OCIR**, **OCIRegistry** (alias)
-- **diagrams.oci.compute.OKEWhite**, **ContainerEngineWhite** (alias)
-- **diagrams.oci.compute.OKE**, **ContainerEngine** (alias)
-- **diagrams.oci.compute.VMWhite**, **VirtualMachineWhite** (alias)
-- **diagrams.oci.compute.VM**, **VirtualMachine** (alias)
+
+<img width="30" src="/img/resources/oci/compute/autoscale-white.png" alt="AutoscaleWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.AutoscaleWhite**
+
+<img width="30" src="/img/resources/oci/compute/autoscale.png" alt="Autoscale" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.Autoscale**
+
+<img width="30" src="/img/resources/oci/compute/bm-white.png" alt="BMWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.BMWhite**, **BareMetalWhite** (alias)
+
+<img width="30" src="/img/resources/oci/compute/bm.png" alt="BM" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.BM**, **BareMetal** (alias)
+
+<img width="30" src="/img/resources/oci/compute/container-white.png" alt="ContainerWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.ContainerWhite**
+
+<img width="30" src="/img/resources/oci/compute/container.png" alt="Container" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.Container**
+
+<img width="30" src="/img/resources/oci/compute/functions-white.png" alt="FunctionsWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.FunctionsWhite**
+
+<img width="30" src="/img/resources/oci/compute/functions.png" alt="Functions" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.Functions**
+
+<img width="30" src="/img/resources/oci/compute/instance-pools-white.png" alt="InstancePoolsWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.InstancePoolsWhite**
+
+<img width="30" src="/img/resources/oci/compute/instance-pools.png" alt="InstancePools" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.InstancePools**
+
+<img width="30" src="/img/resources/oci/compute/ocir-white.png" alt="OCIRWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.OCIRWhite**, **OCIRegistryWhite** (alias)
+
+<img width="30" src="/img/resources/oci/compute/ocir.png" alt="OCIR" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.OCIR**, **OCIRegistry** (alias)
+
+<img width="30" src="/img/resources/oci/compute/oke-white.png" alt="OKEWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.OKEWhite**, **ContainerEngineWhite** (alias)
+
+<img width="30" src="/img/resources/oci/compute/oke.png" alt="OKE" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.OKE**, **ContainerEngine** (alias)
+
+<img width="30" src="/img/resources/oci/compute/vm-white.png" alt="VMWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.VMWhite**, **VirtualMachineWhite** (alias)
+
+<img width="30" src="/img/resources/oci/compute/vm.png" alt="VM" style="float: left; padding-right: 5px;" >
+**diagrams.oci.compute.VM**, **VirtualMachine** (alias)
 
 ## oci.connectivity
 
-- **diagrams.oci.connectivity.BackboneWhite**
-- **diagrams.oci.connectivity.Backbone**
-- **diagrams.oci.connectivity.CDNWhite**
-- **diagrams.oci.connectivity.CDN**
-- **diagrams.oci.connectivity.CustomerDatacenter**
-- **diagrams.oci.connectivity.CustomerDatacntrWhite**
-- **diagrams.oci.connectivity.CustomerPremiseWhite**
-- **diagrams.oci.connectivity.CustomerPremise**
-- **diagrams.oci.connectivity.DisconnectedRegionsWhite**
-- **diagrams.oci.connectivity.DisconnectedRegions**
-- **diagrams.oci.connectivity.DNSWhite**
-- **diagrams.oci.connectivity.DNS**
-- **diagrams.oci.connectivity.FastConnectWhite**
-- **diagrams.oci.connectivity.FastConnect**
-- **diagrams.oci.connectivity.NATGatewayWhite**
-- **diagrams.oci.connectivity.NATGateway**
-- **diagrams.oci.connectivity.VPNWhite**
-- **diagrams.oci.connectivity.VPN**
+
+<img width="30" src="/img/resources/oci/connectivity/backbone-white.png" alt="BackboneWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.BackboneWhite**
+
+<img width="30" src="/img/resources/oci/connectivity/backbone.png" alt="Backbone" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.Backbone**
+
+<img width="30" src="/img/resources/oci/connectivity/cdn-white.png" alt="CDNWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.CDNWhite**
+
+<img width="30" src="/img/resources/oci/connectivity/cdn.png" alt="CDN" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.CDN**
+
+<img width="30" src="/img/resources/oci/connectivity/customer-datacenter.png" alt="CustomerDatacenter" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.CustomerDatacenter**
+
+<img width="30" src="/img/resources/oci/connectivity/customer-datacntr-white.png" alt="CustomerDatacntrWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.CustomerDatacntrWhite**
+
+<img width="30" src="/img/resources/oci/connectivity/customer-premise-white.png" alt="CustomerPremiseWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.CustomerPremiseWhite**
+
+<img width="30" src="/img/resources/oci/connectivity/customer-premise.png" alt="CustomerPremise" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.CustomerPremise**
+
+<img width="30" src="/img/resources/oci/connectivity/disconnected-regions-white.png" alt="DisconnectedRegionsWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.DisconnectedRegionsWhite**
+
+<img width="30" src="/img/resources/oci/connectivity/disconnected-regions.png" alt="DisconnectedRegions" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.DisconnectedRegions**
+
+<img width="30" src="/img/resources/oci/connectivity/dns-white.png" alt="DNSWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.DNSWhite**
+
+<img width="30" src="/img/resources/oci/connectivity/dns.png" alt="DNS" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.DNS**
+
+<img width="30" src="/img/resources/oci/connectivity/fast-connect-white.png" alt="FastConnectWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.FastConnectWhite**
+
+<img width="30" src="/img/resources/oci/connectivity/fast-connect.png" alt="FastConnect" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.FastConnect**
+
+<img width="30" src="/img/resources/oci/connectivity/nat-gateway-white.png" alt="NATGatewayWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.NATGatewayWhite**
+
+<img width="30" src="/img/resources/oci/connectivity/nat-gateway.png" alt="NATGateway" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.NATGateway**
+
+<img width="30" src="/img/resources/oci/connectivity/vpn-white.png" alt="VPNWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.VPNWhite**
+
+<img width="30" src="/img/resources/oci/connectivity/vpn.png" alt="VPN" style="float: left; padding-right: 5px;" >
+**diagrams.oci.connectivity.VPN**
 
 ## oci.database
 
-- **diagrams.oci.database.AutonomousWhite**, **ADBWhite** (alias)
-- **diagrams.oci.database.Autonomous**, **ADB** (alias)
-- **diagrams.oci.database.BigdataServiceWhite**
-- **diagrams.oci.database.BigdataService**
-- **diagrams.oci.database.DatabaseServiceWhite**, **DBServiceWhite** (alias)
-- **diagrams.oci.database.DatabaseService**, **DBService** (alias)
-- **diagrams.oci.database.DataflowApacheWhite**
-- **diagrams.oci.database.DataflowApache**
-- **diagrams.oci.database.DcatWhite**
-- **diagrams.oci.database.Dcat**
-- **diagrams.oci.database.DisWhite**
-- **diagrams.oci.database.Dis**
-- **diagrams.oci.database.DMSWhite**
-- **diagrams.oci.database.DMS**
-- **diagrams.oci.database.ScienceWhite**
-- **diagrams.oci.database.Science**
-- **diagrams.oci.database.StreamWhite**
-- **diagrams.oci.database.Stream**
+
+<img width="30" src="/img/resources/oci/database/autonomous-white.png" alt="AutonomousWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.AutonomousWhite**, **ADBWhite** (alias)
+
+<img width="30" src="/img/resources/oci/database/autonomous.png" alt="Autonomous" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.Autonomous**, **ADB** (alias)
+
+<img width="30" src="/img/resources/oci/database/bigdata-service-white.png" alt="BigdataServiceWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.BigdataServiceWhite**
+
+<img width="30" src="/img/resources/oci/database/bigdata-service.png" alt="BigdataService" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.BigdataService**
+
+<img width="30" src="/img/resources/oci/database/database-service-white.png" alt="DatabaseServiceWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.DatabaseServiceWhite**, **DBServiceWhite** (alias)
+
+<img width="30" src="/img/resources/oci/database/database-service.png" alt="DatabaseService" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.DatabaseService**, **DBService** (alias)
+
+<img width="30" src="/img/resources/oci/database/dataflow-apache-white.png" alt="DataflowApacheWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.DataflowApacheWhite**
+
+<img width="30" src="/img/resources/oci/database/dataflow-apache.png" alt="DataflowApache" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.DataflowApache**
+
+<img width="30" src="/img/resources/oci/database/dcat-white.png" alt="DcatWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.DcatWhite**
+
+<img width="30" src="/img/resources/oci/database/dcat.png" alt="Dcat" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.Dcat**
+
+<img width="30" src="/img/resources/oci/database/dis-white.png" alt="DisWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.DisWhite**
+
+<img width="30" src="/img/resources/oci/database/dis.png" alt="Dis" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.Dis**
+
+<img width="30" src="/img/resources/oci/database/dms-white.png" alt="DMSWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.DMSWhite**
+
+<img width="30" src="/img/resources/oci/database/dms.png" alt="DMS" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.DMS**
+
+<img width="30" src="/img/resources/oci/database/science-white.png" alt="ScienceWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.ScienceWhite**
+
+<img width="30" src="/img/resources/oci/database/science.png" alt="Science" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.Science**
+
+<img width="30" src="/img/resources/oci/database/stream-white.png" alt="StreamWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.StreamWhite**
+
+<img width="30" src="/img/resources/oci/database/stream.png" alt="Stream" style="float: left; padding-right: 5px;" >
+**diagrams.oci.database.Stream**
 
 ## oci.devops
 
-- **diagrams.oci.devops.APIGatewayWhite**
-- **diagrams.oci.devops.APIGateway**
-- **diagrams.oci.devops.APIServiceWhite**
-- **diagrams.oci.devops.APIService**
-- **diagrams.oci.devops.ResourceMgmtWhite**
-- **diagrams.oci.devops.ResourceMgmt**
+
+<img width="30" src="/img/resources/oci/devops/api-gateway-white.png" alt="APIGatewayWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.devops.APIGatewayWhite**
+
+<img width="30" src="/img/resources/oci/devops/api-gateway.png" alt="APIGateway" style="float: left; padding-right: 5px;" >
+**diagrams.oci.devops.APIGateway**
+
+<img width="30" src="/img/resources/oci/devops/api-service-white.png" alt="APIServiceWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.devops.APIServiceWhite**
+
+<img width="30" src="/img/resources/oci/devops/api-service.png" alt="APIService" style="float: left; padding-right: 5px;" >
+**diagrams.oci.devops.APIService**
+
+<img width="30" src="/img/resources/oci/devops/resource-mgmt-white.png" alt="ResourceMgmtWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.devops.ResourceMgmtWhite**
+
+<img width="30" src="/img/resources/oci/devops/resource-mgmt.png" alt="ResourceMgmt" style="float: left; padding-right: 5px;" >
+**diagrams.oci.devops.ResourceMgmt**
 
 ## oci.governance
 
-- **diagrams.oci.governance.AuditWhite**
-- **diagrams.oci.governance.Audit**
-- **diagrams.oci.governance.CompartmentsWhite**
-- **diagrams.oci.governance.Compartments**
-- **diagrams.oci.governance.GroupsWhite**
-- **diagrams.oci.governance.Groups**
-- **diagrams.oci.governance.LoggingWhite**
-- **diagrams.oci.governance.Logging**
-- **diagrams.oci.governance.OCIDWhite**
-- **diagrams.oci.governance.OCID**
-- **diagrams.oci.governance.PoliciesWhite**
-- **diagrams.oci.governance.Policies**
-- **diagrams.oci.governance.TaggingWhite**
-- **diagrams.oci.governance.Tagging**
+
+<img width="30" src="/img/resources/oci/governance/audit-white.png" alt="AuditWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.AuditWhite**
+
+<img width="30" src="/img/resources/oci/governance/audit.png" alt="Audit" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.Audit**
+
+<img width="30" src="/img/resources/oci/governance/compartments-white.png" alt="CompartmentsWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.CompartmentsWhite**
+
+<img width="30" src="/img/resources/oci/governance/compartments.png" alt="Compartments" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.Compartments**
+
+<img width="30" src="/img/resources/oci/governance/groups-white.png" alt="GroupsWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.GroupsWhite**
+
+<img width="30" src="/img/resources/oci/governance/groups.png" alt="Groups" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.Groups**
+
+<img width="30" src="/img/resources/oci/governance/logging-white.png" alt="LoggingWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.LoggingWhite**
+
+<img width="30" src="/img/resources/oci/governance/logging.png" alt="Logging" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.Logging**
+
+<img width="30" src="/img/resources/oci/governance/ocid-white.png" alt="OCIDWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.OCIDWhite**
+
+<img width="30" src="/img/resources/oci/governance/ocid.png" alt="OCID" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.OCID**
+
+<img width="30" src="/img/resources/oci/governance/policies-white.png" alt="PoliciesWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.PoliciesWhite**
+
+<img width="30" src="/img/resources/oci/governance/policies.png" alt="Policies" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.Policies**
+
+<img width="30" src="/img/resources/oci/governance/tagging-white.png" alt="TaggingWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.TaggingWhite**
+
+<img width="30" src="/img/resources/oci/governance/tagging.png" alt="Tagging" style="float: left; padding-right: 5px;" >
+**diagrams.oci.governance.Tagging**
 
 ## oci.monitoring
 
-- **diagrams.oci.monitoring.AlarmWhite**
-- **diagrams.oci.monitoring.Alarm**
-- **diagrams.oci.monitoring.EmailWhite**
-- **diagrams.oci.monitoring.Email**
-- **diagrams.oci.monitoring.EventsWhite**
-- **diagrams.oci.monitoring.Events**
-- **diagrams.oci.monitoring.HealthCheckWhite**
-- **diagrams.oci.monitoring.HealthCheck**
-- **diagrams.oci.monitoring.NotificationsWhite**
-- **diagrams.oci.monitoring.Notifications**
-- **diagrams.oci.monitoring.QueueWhite**
-- **diagrams.oci.monitoring.Queue**
-- **diagrams.oci.monitoring.SearchWhite**
-- **diagrams.oci.monitoring.Search**
-- **diagrams.oci.monitoring.TelemetryWhite**
-- **diagrams.oci.monitoring.Telemetry**
-- **diagrams.oci.monitoring.WorkflowWhite**
-- **diagrams.oci.monitoring.Workflow**
+
+<img width="30" src="/img/resources/oci/monitoring/alarm-white.png" alt="AlarmWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.AlarmWhite**
+
+<img width="30" src="/img/resources/oci/monitoring/alarm.png" alt="Alarm" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.Alarm**
+
+<img width="30" src="/img/resources/oci/monitoring/email-white.png" alt="EmailWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.EmailWhite**
+
+<img width="30" src="/img/resources/oci/monitoring/email.png" alt="Email" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.Email**
+
+<img width="30" src="/img/resources/oci/monitoring/events-white.png" alt="EventsWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.EventsWhite**
+
+<img width="30" src="/img/resources/oci/monitoring/events.png" alt="Events" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.Events**
+
+<img width="30" src="/img/resources/oci/monitoring/health-check-white.png" alt="HealthCheckWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.HealthCheckWhite**
+
+<img width="30" src="/img/resources/oci/monitoring/health-check.png" alt="HealthCheck" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.HealthCheck**
+
+<img width="30" src="/img/resources/oci/monitoring/notifications-white.png" alt="NotificationsWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.NotificationsWhite**
+
+<img width="30" src="/img/resources/oci/monitoring/notifications.png" alt="Notifications" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.Notifications**
+
+<img width="30" src="/img/resources/oci/monitoring/queue-white.png" alt="QueueWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.QueueWhite**
+
+<img width="30" src="/img/resources/oci/monitoring/queue.png" alt="Queue" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.Queue**
+
+<img width="30" src="/img/resources/oci/monitoring/search-white.png" alt="SearchWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.SearchWhite**
+
+<img width="30" src="/img/resources/oci/monitoring/search.png" alt="Search" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.Search**
+
+<img width="30" src="/img/resources/oci/monitoring/telemetry-white.png" alt="TelemetryWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.TelemetryWhite**
+
+<img width="30" src="/img/resources/oci/monitoring/telemetry.png" alt="Telemetry" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.Telemetry**
+
+<img width="30" src="/img/resources/oci/monitoring/workflow-white.png" alt="WorkflowWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.WorkflowWhite**
+
+<img width="30" src="/img/resources/oci/monitoring/workflow.png" alt="Workflow" style="float: left; padding-right: 5px;" >
+**diagrams.oci.monitoring.Workflow**
 
 ## oci.network
 
-- **diagrams.oci.network.DrgWhite**
-- **diagrams.oci.network.Drg**
-- **diagrams.oci.network.FirewallWhite**
-- **diagrams.oci.network.Firewall**
-- **diagrams.oci.network.InternetGatewayWhite**
-- **diagrams.oci.network.InternetGateway**
-- **diagrams.oci.network.LoadBalancerWhite**
-- **diagrams.oci.network.LoadBalancer**
-- **diagrams.oci.network.RouteTableWhite**
-- **diagrams.oci.network.RouteTable**
-- **diagrams.oci.network.SecurityListsWhite**
-- **diagrams.oci.network.SecurityLists**
-- **diagrams.oci.network.ServiceGatewayWhite**
-- **diagrams.oci.network.ServiceGateway**
-- **diagrams.oci.network.VcnWhite**
-- **diagrams.oci.network.Vcn**
+
+<img width="30" src="/img/resources/oci/network/drg-white.png" alt="DrgWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.DrgWhite**
+
+<img width="30" src="/img/resources/oci/network/drg.png" alt="Drg" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.Drg**
+
+<img width="30" src="/img/resources/oci/network/firewall-white.png" alt="FirewallWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.FirewallWhite**
+
+<img width="30" src="/img/resources/oci/network/firewall.png" alt="Firewall" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.Firewall**
+
+<img width="30" src="/img/resources/oci/network/internet-gateway-white.png" alt="InternetGatewayWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.InternetGatewayWhite**
+
+<img width="30" src="/img/resources/oci/network/internet-gateway.png" alt="InternetGateway" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.InternetGateway**
+
+<img width="30" src="/img/resources/oci/network/load-balancer-white.png" alt="LoadBalancerWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.LoadBalancerWhite**
+
+<img width="30" src="/img/resources/oci/network/load-balancer.png" alt="LoadBalancer" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.LoadBalancer**
+
+<img width="30" src="/img/resources/oci/network/route-table-white.png" alt="RouteTableWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.RouteTableWhite**
+
+<img width="30" src="/img/resources/oci/network/route-table.png" alt="RouteTable" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.RouteTable**
+
+<img width="30" src="/img/resources/oci/network/security-lists-white.png" alt="SecurityListsWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.SecurityListsWhite**
+
+<img width="30" src="/img/resources/oci/network/security-lists.png" alt="SecurityLists" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.SecurityLists**
+
+<img width="30" src="/img/resources/oci/network/service-gateway-white.png" alt="ServiceGatewayWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.ServiceGatewayWhite**
+
+<img width="30" src="/img/resources/oci/network/service-gateway.png" alt="ServiceGateway" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.ServiceGateway**
+
+<img width="30" src="/img/resources/oci/network/vcn-white.png" alt="VcnWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.VcnWhite**
+
+<img width="30" src="/img/resources/oci/network/vcn.png" alt="Vcn" style="float: left; padding-right: 5px;" >
+**diagrams.oci.network.Vcn**
 
 ## oci.security
 
-- **diagrams.oci.security.CloudGuardWhite**
-- **diagrams.oci.security.CloudGuard**
-- **diagrams.oci.security.DDOSWhite**
-- **diagrams.oci.security.DDOS**
-- **diagrams.oci.security.EncryptionWhite**
-- **diagrams.oci.security.Encryption**
-- **diagrams.oci.security.IDAccessWhite**
-- **diagrams.oci.security.IDAccess**
-- **diagrams.oci.security.KeyManagementWhite**
-- **diagrams.oci.security.KeyManagement**
-- **diagrams.oci.security.MaxSecurityZoneWhite**
-- **diagrams.oci.security.MaxSecurityZone**
-- **diagrams.oci.security.VaultWhite**
-- **diagrams.oci.security.Vault**
-- **diagrams.oci.security.WAFWhite**
-- **diagrams.oci.security.WAF**
+
+<img width="30" src="/img/resources/oci/security/cloud-guard-white.png" alt="CloudGuardWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.CloudGuardWhite**
+
+<img width="30" src="/img/resources/oci/security/cloud-guard.png" alt="CloudGuard" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.CloudGuard**
+
+<img width="30" src="/img/resources/oci/security/ddos-white.png" alt="DDOSWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.DDOSWhite**
+
+<img width="30" src="/img/resources/oci/security/ddos.png" alt="DDOS" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.DDOS**
+
+<img width="30" src="/img/resources/oci/security/encryption-white.png" alt="EncryptionWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.EncryptionWhite**
+
+<img width="30" src="/img/resources/oci/security/encryption.png" alt="Encryption" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.Encryption**
+
+<img width="30" src="/img/resources/oci/security/id-access-white.png" alt="IDAccessWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.IDAccessWhite**
+
+<img width="30" src="/img/resources/oci/security/id-access.png" alt="IDAccess" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.IDAccess**
+
+<img width="30" src="/img/resources/oci/security/key-management-white.png" alt="KeyManagementWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.KeyManagementWhite**
+
+<img width="30" src="/img/resources/oci/security/key-management.png" alt="KeyManagement" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.KeyManagement**
+
+<img width="30" src="/img/resources/oci/security/max-security-zone-white.png" alt="MaxSecurityZoneWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.MaxSecurityZoneWhite**
+
+<img width="30" src="/img/resources/oci/security/max-security-zone.png" alt="MaxSecurityZone" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.MaxSecurityZone**
+
+<img width="30" src="/img/resources/oci/security/vault-white.png" alt="VaultWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.VaultWhite**
+
+<img width="30" src="/img/resources/oci/security/vault.png" alt="Vault" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.Vault**
+
+<img width="30" src="/img/resources/oci/security/waf-white.png" alt="WAFWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.WAFWhite**
+
+<img width="30" src="/img/resources/oci/security/waf.png" alt="WAF" style="float: left; padding-right: 5px;" >
+**diagrams.oci.security.WAF**
 
 ## oci.storage
 
-- **diagrams.oci.storage.BackupRestoreWhite**
-- **diagrams.oci.storage.BackupRestore**
-- **diagrams.oci.storage.BlockStorageCloneWhite**
-- **diagrams.oci.storage.BlockStorageClone**
-- **diagrams.oci.storage.BlockStorageWhite**
-- **diagrams.oci.storage.BlockStorage**
-- **diagrams.oci.storage.BucketsWhite**
-- **diagrams.oci.storage.Buckets**
-- **diagrams.oci.storage.DataTransferWhite**
-- **diagrams.oci.storage.DataTransfer**
-- **diagrams.oci.storage.ElasticPerformanceWhite**
-- **diagrams.oci.storage.ElasticPerformance**
-- **diagrams.oci.storage.FileStorageWhite**
-- **diagrams.oci.storage.FileStorage**
-- **diagrams.oci.storage.ObjectStorageWhite**
-- **diagrams.oci.storage.ObjectStorage**
-- **diagrams.oci.storage.StorageGatewayWhite**
-- **diagrams.oci.storage.StorageGateway**
+
+<img width="30" src="/img/resources/oci/storage/backup-restore-white.png" alt="BackupRestoreWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.BackupRestoreWhite**
+
+<img width="30" src="/img/resources/oci/storage/backup-restore.png" alt="BackupRestore" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.BackupRestore**
+
+<img width="30" src="/img/resources/oci/storage/block-storage-clone-white.png" alt="BlockStorageCloneWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.BlockStorageCloneWhite**
+
+<img width="30" src="/img/resources/oci/storage/block-storage-clone.png" alt="BlockStorageClone" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.BlockStorageClone**
+
+<img width="30" src="/img/resources/oci/storage/block-storage-white.png" alt="BlockStorageWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.BlockStorageWhite**
+
+<img width="30" src="/img/resources/oci/storage/block-storage.png" alt="BlockStorage" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.BlockStorage**
+
+<img width="30" src="/img/resources/oci/storage/buckets-white.png" alt="BucketsWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.BucketsWhite**
+
+<img width="30" src="/img/resources/oci/storage/buckets.png" alt="Buckets" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.Buckets**
+
+<img width="30" src="/img/resources/oci/storage/data-transfer-white.png" alt="DataTransferWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.DataTransferWhite**
+
+<img width="30" src="/img/resources/oci/storage/data-transfer.png" alt="DataTransfer" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.DataTransfer**
+
+<img width="30" src="/img/resources/oci/storage/elastic-performance-white.png" alt="ElasticPerformanceWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.ElasticPerformanceWhite**
+
+<img width="30" src="/img/resources/oci/storage/elastic-performance.png" alt="ElasticPerformance" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.ElasticPerformance**
+
+<img width="30" src="/img/resources/oci/storage/file-storage-white.png" alt="FileStorageWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.FileStorageWhite**
+
+<img width="30" src="/img/resources/oci/storage/file-storage.png" alt="FileStorage" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.FileStorage**
+
+<img width="30" src="/img/resources/oci/storage/object-storage-white.png" alt="ObjectStorageWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.ObjectStorageWhite**
+
+<img width="30" src="/img/resources/oci/storage/object-storage.png" alt="ObjectStorage" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.ObjectStorage**
+
+<img width="30" src="/img/resources/oci/storage/storage-gateway-white.png" alt="StorageGatewayWhite" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.StorageGatewayWhite**
+
+<img width="30" src="/img/resources/oci/storage/storage-gateway.png" alt="StorageGateway" style="float: left; padding-right: 5px;" >
+**diagrams.oci.storage.StorageGateway**

docs/nodes/onprem.md

@@ -7,242 +7,552 @@ Node classes list of onprem provider.
 
 ## onprem.aggregator
 
-- **diagrams.onprem.aggregator.Fluentd**
-- **diagrams.onprem.aggregator.Vector**
+
+<img width="30" src="/img/resources/onprem/aggregator/fluentd.png" alt="Fluentd" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.aggregator.Fluentd**
+
+<img width="30" src="/img/resources/onprem/aggregator/vector.png" alt="Vector" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.aggregator.Vector**
 
 ## onprem.analytics
 
-- **diagrams.onprem.analytics.Beam**
-- **diagrams.onprem.analytics.Databricks**
-- **diagrams.onprem.analytics.Dbt**
-- **diagrams.onprem.analytics.Dremio**
-- **diagrams.onprem.analytics.Flink**
-- **diagrams.onprem.analytics.Hadoop**
-- **diagrams.onprem.analytics.Hive**
-- **diagrams.onprem.analytics.Metabase**
-- **diagrams.onprem.analytics.Norikra**
-- **diagrams.onprem.analytics.Powerbi**, **PowerBI** (alias)
-- **diagrams.onprem.analytics.Presto**
-- **diagrams.onprem.analytics.Singer**
-- **diagrams.onprem.analytics.Spark**
-- **diagrams.onprem.analytics.Storm**
-- **diagrams.onprem.analytics.Superset**
-- **diagrams.onprem.analytics.Tableau**
+
+<img width="30" src="/img/resources/onprem/analytics/beam.png" alt="Beam" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Beam**
+
+<img width="30" src="/img/resources/onprem/analytics/databricks.png" alt="Databricks" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Databricks**
+
+<img width="30" src="/img/resources/onprem/analytics/dbt.png" alt="Dbt" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Dbt**
+
+<img width="30" src="/img/resources/onprem/analytics/dremio.png" alt="Dremio" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Dremio**
+
+<img width="30" src="/img/resources/onprem/analytics/flink.png" alt="Flink" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Flink**
+
+<img width="30" src="/img/resources/onprem/analytics/hadoop.png" alt="Hadoop" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Hadoop**
+
+<img width="30" src="/img/resources/onprem/analytics/hive.png" alt="Hive" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Hive**
+
+<img width="30" src="/img/resources/onprem/analytics/metabase.png" alt="Metabase" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Metabase**
+
+<img width="30" src="/img/resources/onprem/analytics/norikra.png" alt="Norikra" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Norikra**
+
+<img width="30" src="/img/resources/onprem/analytics/powerbi.png" alt="Powerbi" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Powerbi**, **PowerBI** (alias)
+
+<img width="30" src="/img/resources/onprem/analytics/presto.png" alt="Presto" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Presto**
+
+<img width="30" src="/img/resources/onprem/analytics/singer.png" alt="Singer" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Singer**
+
+<img width="30" src="/img/resources/onprem/analytics/spark.png" alt="Spark" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Spark**
+
+<img width="30" src="/img/resources/onprem/analytics/storm.png" alt="Storm" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Storm**
+
+<img width="30" src="/img/resources/onprem/analytics/superset.png" alt="Superset" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Superset**
+
+<img width="30" src="/img/resources/onprem/analytics/tableau.png" alt="Tableau" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.analytics.Tableau**
 
 ## onprem.auth
 
-- **diagrams.onprem.auth.Boundary**
-- **diagrams.onprem.auth.BuzzfeedSso**
-- **diagrams.onprem.auth.Oauth2Proxy**
+
+<img width="30" src="/img/resources/onprem/auth/boundary.png" alt="Boundary" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.auth.Boundary**
+
+<img width="30" src="/img/resources/onprem/auth/buzzfeed-sso.png" alt="BuzzfeedSso" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.auth.BuzzfeedSso**
+
+<img width="30" src="/img/resources/onprem/auth/oauth2-proxy.png" alt="Oauth2Proxy" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.auth.Oauth2Proxy**
 
 ## onprem.cd
 
-- **diagrams.onprem.cd.Spinnaker**
-- **diagrams.onprem.cd.TektonCli**
-- **diagrams.onprem.cd.Tekton**
+
+<img width="30" src="/img/resources/onprem/cd/spinnaker.png" alt="Spinnaker" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.cd.Spinnaker**
+
+<img width="30" src="/img/resources/onprem/cd/tekton-cli.png" alt="TektonCli" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.cd.TektonCli**
+
+<img width="30" src="/img/resources/onprem/cd/tekton.png" alt="Tekton" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.cd.Tekton**
 
 ## onprem.certificates
 
-- **diagrams.onprem.certificates.CertManager**
-- **diagrams.onprem.certificates.LetsEncrypt**
+
+<img width="30" src="/img/resources/onprem/certificates/cert-manager.png" alt="CertManager" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.certificates.CertManager**
+
+<img width="30" src="/img/resources/onprem/certificates/lets-encrypt.png" alt="LetsEncrypt" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.certificates.LetsEncrypt**
 
 ## onprem.ci
 
-- **diagrams.onprem.ci.Circleci**, **CircleCI** (alias)
-- **diagrams.onprem.ci.Concourseci**, **ConcourseCI** (alias)
-- **diagrams.onprem.ci.Droneci**, **DroneCI** (alias)
-- **diagrams.onprem.ci.GithubActions**
-- **diagrams.onprem.ci.Gitlabci**, **GitlabCI** (alias)
-- **diagrams.onprem.ci.Jenkins**
-- **diagrams.onprem.ci.Teamcity**, **TC** (alias)
-- **diagrams.onprem.ci.Travisci**, **TravisCI** (alias)
-- **diagrams.onprem.ci.Zuulci**, **ZuulCI** (alias)
+
+<img width="30" src="/img/resources/onprem/ci/circleci.png" alt="Circleci" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.ci.Circleci**, **CircleCI** (alias)
+
+<img width="30" src="/img/resources/onprem/ci/concourseci.png" alt="Concourseci" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.ci.Concourseci**, **ConcourseCI** (alias)
+
+<img width="30" src="/img/resources/onprem/ci/droneci.png" alt="Droneci" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.ci.Droneci**, **DroneCI** (alias)
+
+<img width="30" src="/img/resources/onprem/ci/github-actions.png" alt="GithubActions" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.ci.GithubActions**
+
+<img width="30" src="/img/resources/onprem/ci/gitlabci.png" alt="Gitlabci" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.ci.Gitlabci**, **GitlabCI** (alias)
+
+<img width="30" src="/img/resources/onprem/ci/jenkins.png" alt="Jenkins" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.ci.Jenkins**
+
+<img width="30" src="/img/resources/onprem/ci/teamcity.png" alt="Teamcity" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.ci.Teamcity**, **TC** (alias)
+
+<img width="30" src="/img/resources/onprem/ci/travisci.png" alt="Travisci" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.ci.Travisci**, **TravisCI** (alias)
+
+<img width="30" src="/img/resources/onprem/ci/zuulci.png" alt="Zuulci" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.ci.Zuulci**, **ZuulCI** (alias)
 
 ## onprem.client
 
-- **diagrams.onprem.client.Client**
-- **diagrams.onprem.client.User**
-- **diagrams.onprem.client.Users**
+
+<img width="30" src="/img/resources/onprem/client/client.png" alt="Client" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.client.Client**
+
+<img width="30" src="/img/resources/onprem/client/user.png" alt="User" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.client.User**
+
+<img width="30" src="/img/resources/onprem/client/users.png" alt="Users" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.client.Users**
 
 ## onprem.compute
 
-- **diagrams.onprem.compute.Nomad**
-- **diagrams.onprem.compute.Server**
+
+<img width="30" src="/img/resources/onprem/compute/nomad.png" alt="Nomad" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.compute.Nomad**
+
+<img width="30" src="/img/resources/onprem/compute/server.png" alt="Server" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.compute.Server**
 
 ## onprem.container
 
-- **diagrams.onprem.container.Containerd**
-- **diagrams.onprem.container.Crio**
-- **diagrams.onprem.container.Docker**
-- **diagrams.onprem.container.Firecracker**
-- **diagrams.onprem.container.Gvisor**
-- **diagrams.onprem.container.K3S**
-- **diagrams.onprem.container.Lxc**, **LXC** (alias)
-- **diagrams.onprem.container.Rkt**, **RKT** (alias)
+
+<img width="30" src="/img/resources/onprem/container/containerd.png" alt="Containerd" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.container.Containerd**
+
+<img width="30" src="/img/resources/onprem/container/crio.png" alt="Crio" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.container.Crio**
+
+<img width="30" src="/img/resources/onprem/container/docker.png" alt="Docker" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.container.Docker**
+
+<img width="30" src="/img/resources/onprem/container/firecracker.png" alt="Firecracker" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.container.Firecracker**
+
+<img width="30" src="/img/resources/onprem/container/gvisor.png" alt="Gvisor" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.container.Gvisor**
+
+<img width="30" src="/img/resources/onprem/container/k3s.png" alt="K3S" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.container.K3S**
+
+<img width="30" src="/img/resources/onprem/container/lxc.png" alt="Lxc" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.container.Lxc**, **LXC** (alias)
+
+<img width="30" src="/img/resources/onprem/container/rkt.png" alt="Rkt" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.container.Rkt**, **RKT** (alias)
 
 ## onprem.database
 
-- **diagrams.onprem.database.Cassandra**
-- **diagrams.onprem.database.Clickhouse**, **ClickHouse** (alias)
-- **diagrams.onprem.database.Cockroachdb**, **CockroachDB** (alias)
-- **diagrams.onprem.database.Couchbase**
-- **diagrams.onprem.database.Couchdb**, **CouchDB** (alias)
-- **diagrams.onprem.database.Dgraph**
-- **diagrams.onprem.database.Druid**
-- **diagrams.onprem.database.Hbase**, **HBase** (alias)
-- **diagrams.onprem.database.Influxdb**, **InfluxDB** (alias)
-- **diagrams.onprem.database.Janusgraph**, **JanusGraph** (alias)
-- **diagrams.onprem.database.Mariadb**, **MariaDB** (alias)
-- **diagrams.onprem.database.Mongodb**, **MongoDB** (alias)
-- **diagrams.onprem.database.Mssql**, **MSSQL** (alias)
-- **diagrams.onprem.database.Mysql**, **MySQL** (alias)
-- **diagrams.onprem.database.Neo4J**
-- **diagrams.onprem.database.Oracle**
-- **diagrams.onprem.database.Postgresql**, **PostgreSQL** (alias)
-- **diagrams.onprem.database.Scylla**
+
+<img width="30" src="/img/resources/onprem/database/cassandra.png" alt="Cassandra" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Cassandra**
+
+<img width="30" src="/img/resources/onprem/database/clickhouse.png" alt="Clickhouse" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Clickhouse**, **ClickHouse** (alias)
+
+<img width="30" src="/img/resources/onprem/database/cockroachdb.png" alt="Cockroachdb" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Cockroachdb**, **CockroachDB** (alias)
+
+<img width="30" src="/img/resources/onprem/database/couchbase.png" alt="Couchbase" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Couchbase**
+
+<img width="30" src="/img/resources/onprem/database/couchdb.png" alt="Couchdb" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Couchdb**, **CouchDB** (alias)
+
+<img width="30" src="/img/resources/onprem/database/dgraph.png" alt="Dgraph" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Dgraph**
+
+<img width="30" src="/img/resources/onprem/database/druid.png" alt="Druid" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Druid**
+
+<img width="30" src="/img/resources/onprem/database/hbase.png" alt="Hbase" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Hbase**, **HBase** (alias)
+
+<img width="30" src="/img/resources/onprem/database/influxdb.png" alt="Influxdb" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Influxdb**, **InfluxDB** (alias)
+
+<img width="30" src="/img/resources/onprem/database/janusgraph.png" alt="Janusgraph" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Janusgraph**, **JanusGraph** (alias)
+
+<img width="30" src="/img/resources/onprem/database/mariadb.png" alt="Mariadb" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Mariadb**, **MariaDB** (alias)
+
+<img width="30" src="/img/resources/onprem/database/mongodb.png" alt="Mongodb" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Mongodb**, **MongoDB** (alias)
+
+<img width="30" src="/img/resources/onprem/database/mssql.png" alt="Mssql" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Mssql**, **MSSQL** (alias)
+
+<img width="30" src="/img/resources/onprem/database/mysql.png" alt="Mysql" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Mysql**, **MySQL** (alias)
+
+<img width="30" src="/img/resources/onprem/database/neo4j.png" alt="Neo4J" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Neo4J**
+
+<img width="30" src="/img/resources/onprem/database/oracle.png" alt="Oracle" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Oracle**
+
+<img width="30" src="/img/resources/onprem/database/postgresql.png" alt="Postgresql" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Postgresql**, **PostgreSQL** (alias)
+
+<img width="30" src="/img/resources/onprem/database/scylla.png" alt="Scylla" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.database.Scylla**
 
 ## onprem.dns
 
-- **diagrams.onprem.dns.Coredns**
-- **diagrams.onprem.dns.Powerdns**
+
+<img width="30" src="/img/resources/onprem/dns/coredns.png" alt="Coredns" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.dns.Coredns**
+
+<img width="30" src="/img/resources/onprem/dns/powerdns.png" alt="Powerdns" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.dns.Powerdns**
 
 ## onprem.etl
 
-- **diagrams.onprem.etl.Embulk**
+
+<img width="30" src="/img/resources/onprem/etl/embulk.png" alt="Embulk" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.etl.Embulk**
 
 ## onprem.gitops
 
-- **diagrams.onprem.gitops.Argocd**, **ArgoCD** (alias)
-- **diagrams.onprem.gitops.Flagger**
-- **diagrams.onprem.gitops.Flux**
+
+<img width="30" src="/img/resources/onprem/gitops/argocd.png" alt="Argocd" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.gitops.Argocd**, **ArgoCD** (alias)
+
+<img width="30" src="/img/resources/onprem/gitops/flagger.png" alt="Flagger" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.gitops.Flagger**
+
+<img width="30" src="/img/resources/onprem/gitops/flux.png" alt="Flux" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.gitops.Flux**
 
 ## onprem.groupware
 
-- **diagrams.onprem.groupware.Nextcloud**
+
+<img width="30" src="/img/resources/onprem/groupware/nextcloud.png" alt="Nextcloud" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.groupware.Nextcloud**
 
 ## onprem.iac
 
-- **diagrams.onprem.iac.Ansible**
-- **diagrams.onprem.iac.Atlantis**
-- **diagrams.onprem.iac.Awx**
-- **diagrams.onprem.iac.Puppet**
-- **diagrams.onprem.iac.Terraform**
+
+<img width="30" src="/img/resources/onprem/iac/ansible.png" alt="Ansible" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.iac.Ansible**
+
+<img width="30" src="/img/resources/onprem/iac/atlantis.png" alt="Atlantis" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.iac.Atlantis**
+
+<img width="30" src="/img/resources/onprem/iac/awx.png" alt="Awx" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.iac.Awx**
+
+<img width="30" src="/img/resources/onprem/iac/puppet.png" alt="Puppet" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.iac.Puppet**
+
+<img width="30" src="/img/resources/onprem/iac/terraform.png" alt="Terraform" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.iac.Terraform**
 
 ## onprem.identity
 
-- **diagrams.onprem.identity.Dex**
+
+<img width="30" src="/img/resources/onprem/identity/dex.png" alt="Dex" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.identity.Dex**
 
 ## onprem.inmemory
 
-- **diagrams.onprem.inmemory.Aerospike**
-- **diagrams.onprem.inmemory.Hazelcast**
-- **diagrams.onprem.inmemory.Memcached**
-- **diagrams.onprem.inmemory.Redis**
+
+<img width="30" src="/img/resources/onprem/inmemory/aerospike.png" alt="Aerospike" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.inmemory.Aerospike**
+
+<img width="30" src="/img/resources/onprem/inmemory/hazelcast.png" alt="Hazelcast" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.inmemory.Hazelcast**
+
+<img width="30" src="/img/resources/onprem/inmemory/memcached.png" alt="Memcached" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.inmemory.Memcached**
+
+<img width="30" src="/img/resources/onprem/inmemory/redis.png" alt="Redis" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.inmemory.Redis**
 
 ## onprem.logging
 
-- **diagrams.onprem.logging.Fluentbit**, **FluentBit** (alias)
-- **diagrams.onprem.logging.Graylog**
-- **diagrams.onprem.logging.Loki**
-- **diagrams.onprem.logging.Rsyslog**, **RSyslog** (alias)
-- **diagrams.onprem.logging.SyslogNg**
+
+<img width="30" src="/img/resources/onprem/logging/fluentbit.png" alt="Fluentbit" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.logging.Fluentbit**, **FluentBit** (alias)
+
+<img width="30" src="/img/resources/onprem/logging/graylog.png" alt="Graylog" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.logging.Graylog**
+
+<img width="30" src="/img/resources/onprem/logging/loki.png" alt="Loki" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.logging.Loki**
+
+<img width="30" src="/img/resources/onprem/logging/rsyslog.png" alt="Rsyslog" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.logging.Rsyslog**, **RSyslog** (alias)
+
+<img width="30" src="/img/resources/onprem/logging/syslog-ng.png" alt="SyslogNg" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.logging.SyslogNg**
 
 ## onprem.mlops
 
-- **diagrams.onprem.mlops.Polyaxon**
+
+<img width="30" src="/img/resources/onprem/mlops/polyaxon.png" alt="Polyaxon" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.mlops.Polyaxon**
 
 ## onprem.monitoring
 
-- **diagrams.onprem.monitoring.Cortex**
-- **diagrams.onprem.monitoring.Datadog**
-- **diagrams.onprem.monitoring.Dynatrace**
-- **diagrams.onprem.monitoring.Grafana**
-- **diagrams.onprem.monitoring.Humio**
-- **diagrams.onprem.monitoring.Nagios**
-- **diagrams.onprem.monitoring.Newrelic**
-- **diagrams.onprem.monitoring.PrometheusOperator**
-- **diagrams.onprem.monitoring.Prometheus**
-- **diagrams.onprem.monitoring.Sentry**
-- **diagrams.onprem.monitoring.Splunk**
-- **diagrams.onprem.monitoring.Thanos**
-- **diagrams.onprem.monitoring.Zabbix**
+
+<img width="30" src="/img/resources/onprem/monitoring/cortex.png" alt="Cortex" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Cortex**
+
+<img width="30" src="/img/resources/onprem/monitoring/datadog.png" alt="Datadog" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Datadog**
+
+<img width="30" src="/img/resources/onprem/monitoring/dynatrace.png" alt="Dynatrace" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Dynatrace**
+
+<img width="30" src="/img/resources/onprem/monitoring/grafana.png" alt="Grafana" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Grafana**
+
+<img width="30" src="/img/resources/onprem/monitoring/humio.png" alt="Humio" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Humio**
+
+<img width="30" src="/img/resources/onprem/monitoring/nagios.png" alt="Nagios" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Nagios**
+
+<img width="30" src="/img/resources/onprem/monitoring/newrelic.png" alt="Newrelic" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Newrelic**
+
+<img width="30" src="/img/resources/onprem/monitoring/prometheus-operator.png" alt="PrometheusOperator" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.PrometheusOperator**
+
+<img width="30" src="/img/resources/onprem/monitoring/prometheus.png" alt="Prometheus" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Prometheus**
+
+<img width="30" src="/img/resources/onprem/monitoring/sentry.png" alt="Sentry" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Sentry**
+
+<img width="30" src="/img/resources/onprem/monitoring/splunk.png" alt="Splunk" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Splunk**
+
+<img width="30" src="/img/resources/onprem/monitoring/thanos.png" alt="Thanos" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Thanos**
+
+<img width="30" src="/img/resources/onprem/monitoring/zabbix.png" alt="Zabbix" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.monitoring.Zabbix**
 
 ## onprem.network
 
-- **diagrams.onprem.network.Ambassador**
-- **diagrams.onprem.network.Apache**
-- **diagrams.onprem.network.Bind9**
-- **diagrams.onprem.network.Caddy**
-- **diagrams.onprem.network.Consul**
-- **diagrams.onprem.network.Envoy**
-- **diagrams.onprem.network.Etcd**, **ETCD** (alias)
-- **diagrams.onprem.network.Glassfish**
-- **diagrams.onprem.network.Gunicorn**
-- **diagrams.onprem.network.Haproxy**, **HAProxy** (alias)
-- **diagrams.onprem.network.Internet**
-- **diagrams.onprem.network.Istio**
-- **diagrams.onprem.network.Jbossas**
-- **diagrams.onprem.network.Jetty**
-- **diagrams.onprem.network.Kong**
-- **diagrams.onprem.network.Linkerd**
-- **diagrams.onprem.network.Nginx**
-- **diagrams.onprem.network.Ocelot**
-- **diagrams.onprem.network.OpenServiceMesh**, **OSM** (alias)
-- **diagrams.onprem.network.Opnsense**, **OPNSense** (alias)
-- **diagrams.onprem.network.Pfsense**, **PFSense** (alias)
-- **diagrams.onprem.network.Pomerium**
-- **diagrams.onprem.network.Powerdns**
-- **diagrams.onprem.network.Tomcat**
-- **diagrams.onprem.network.Traefik**
-- **diagrams.onprem.network.Tyk**
-- **diagrams.onprem.network.Vyos**, **VyOS** (alias)
-- **diagrams.onprem.network.Wildfly**
-- **diagrams.onprem.network.Zookeeper**
+
+<img width="30" src="/img/resources/onprem/network/ambassador.png" alt="Ambassador" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Ambassador**
+
+<img width="30" src="/img/resources/onprem/network/apache.png" alt="Apache" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Apache**
+
+<img width="30" src="/img/resources/onprem/network/bind-9.png" alt="Bind9" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Bind9**
+
+<img width="30" src="/img/resources/onprem/network/caddy.png" alt="Caddy" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Caddy**
+
+<img width="30" src="/img/resources/onprem/network/consul.png" alt="Consul" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Consul**
+
+<img width="30" src="/img/resources/onprem/network/envoy.png" alt="Envoy" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Envoy**
+
+<img width="30" src="/img/resources/onprem/network/etcd.png" alt="Etcd" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Etcd**, **ETCD** (alias)
+
+<img width="30" src="/img/resources/onprem/network/glassfish.png" alt="Glassfish" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Glassfish**
+
+<img width="30" src="/img/resources/onprem/network/gunicorn.png" alt="Gunicorn" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Gunicorn**
+
+<img width="30" src="/img/resources/onprem/network/haproxy.png" alt="Haproxy" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Haproxy**, **HAProxy** (alias)
+
+<img width="30" src="/img/resources/onprem/network/internet.png" alt="Internet" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Internet**
+
+<img width="30" src="/img/resources/onprem/network/istio.png" alt="Istio" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Istio**
+
+<img width="30" src="/img/resources/onprem/network/jbossas.png" alt="Jbossas" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Jbossas**
+
+<img width="30" src="/img/resources/onprem/network/jetty.png" alt="Jetty" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Jetty**
+
+<img width="30" src="/img/resources/onprem/network/kong.png" alt="Kong" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Kong**
+
+<img width="30" src="/img/resources/onprem/network/linkerd.png" alt="Linkerd" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Linkerd**
+
+<img width="30" src="/img/resources/onprem/network/nginx.png" alt="Nginx" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Nginx**
+
+<img width="30" src="/img/resources/onprem/network/ocelot.png" alt="Ocelot" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Ocelot**
+
+<img width="30" src="/img/resources/onprem/network/open-service-mesh.png" alt="OpenServiceMesh" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.OpenServiceMesh**, **OSM** (alias)
+
+<img width="30" src="/img/resources/onprem/network/opnsense.png" alt="Opnsense" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Opnsense**, **OPNSense** (alias)
+
+<img width="30" src="/img/resources/onprem/network/pfsense.png" alt="Pfsense" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Pfsense**, **PFSense** (alias)
+
+<img width="30" src="/img/resources/onprem/network/pomerium.png" alt="Pomerium" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Pomerium**
+
+<img width="30" src="/img/resources/onprem/network/powerdns.png" alt="Powerdns" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Powerdns**
+
+<img width="30" src="/img/resources/onprem/network/tomcat.png" alt="Tomcat" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Tomcat**
+
+<img width="30" src="/img/resources/onprem/network/traefik.png" alt="Traefik" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Traefik**
+
+<img width="30" src="/img/resources/onprem/network/tyk.png" alt="Tyk" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Tyk**
+
+<img width="30" src="/img/resources/onprem/network/vyos.png" alt="Vyos" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Vyos**, **VyOS** (alias)
+
+<img width="30" src="/img/resources/onprem/network/wildfly.png" alt="Wildfly" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Wildfly**
+
+<img width="30" src="/img/resources/onprem/network/zookeeper.png" alt="Zookeeper" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.network.Zookeeper**
 
 ## onprem.proxmox
 
-- **diagrams.onprem.proxmox.Pve**, **ProxmoxVE** (alias)
+
+<img width="30" src="/img/resources/onprem/proxmox/pve.png" alt="Pve" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.proxmox.Pve**, **ProxmoxVE** (alias)
 
 ## onprem.queue
 
-- **diagrams.onprem.queue.Activemq**, **ActiveMQ** (alias)
-- **diagrams.onprem.queue.Celery**
-- **diagrams.onprem.queue.Kafka**
-- **diagrams.onprem.queue.Nats**
-- **diagrams.onprem.queue.Rabbitmq**, **RabbitMQ** (alias)
-- **diagrams.onprem.queue.Zeromq**, **ZeroMQ** (alias)
+
+<img width="30" src="/img/resources/onprem/queue/activemq.png" alt="Activemq" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.queue.Activemq**, **ActiveMQ** (alias)
+
+<img width="30" src="/img/resources/onprem/queue/celery.png" alt="Celery" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.queue.Celery**
+
+<img width="30" src="/img/resources/onprem/queue/kafka.png" alt="Kafka" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.queue.Kafka**
+
+<img width="30" src="/img/resources/onprem/queue/nats.png" alt="Nats" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.queue.Nats**
+
+<img width="30" src="/img/resources/onprem/queue/rabbitmq.png" alt="Rabbitmq" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.queue.Rabbitmq**, **RabbitMQ** (alias)
+
+<img width="30" src="/img/resources/onprem/queue/zeromq.png" alt="Zeromq" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.queue.Zeromq**, **ZeroMQ** (alias)
 
 ## onprem.search
 
-- **diagrams.onprem.search.Solr**
+
+<img width="30" src="/img/resources/onprem/search/solr.png" alt="Solr" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.search.Solr**
 
 ## onprem.security
 
-- **diagrams.onprem.security.Bitwarden**
-- **diagrams.onprem.security.Trivy**
-- **diagrams.onprem.security.Vault**
+
+<img width="30" src="/img/resources/onprem/security/bitwarden.png" alt="Bitwarden" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.security.Bitwarden**
+
+<img width="30" src="/img/resources/onprem/security/trivy.png" alt="Trivy" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.security.Trivy**
+
+<img width="30" src="/img/resources/onprem/security/vault.png" alt="Vault" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.security.Vault**
 
 ## onprem.storage
 
-- **diagrams.onprem.storage.CephOsd**, **CEPH_OSD** (alias)
-- **diagrams.onprem.storage.Ceph**, **CEPH** (alias)
-- **diagrams.onprem.storage.Glusterfs**
+
+<img width="30" src="/img/resources/onprem/storage/ceph-osd.png" alt="CephOsd" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.storage.CephOsd**, **CEPH_OSD** (alias)
+
+<img width="30" src="/img/resources/onprem/storage/ceph.png" alt="Ceph" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.storage.Ceph**, **CEPH** (alias)
+
+<img width="30" src="/img/resources/onprem/storage/glusterfs.png" alt="Glusterfs" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.storage.Glusterfs**
 
 ## onprem.tracing
 
-- **diagrams.onprem.tracing.Jaeger**
+
+<img width="30" src="/img/resources/onprem/tracing/jaeger.png" alt="Jaeger" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.tracing.Jaeger**
 
 ## onprem.vcs
 
-- **diagrams.onprem.vcs.Git**
-- **diagrams.onprem.vcs.Gitea**
-- **diagrams.onprem.vcs.Github**
-- **diagrams.onprem.vcs.Gitlab**
-- **diagrams.onprem.vcs.Svn**
+
+<img width="30" src="/img/resources/onprem/vcs/git.png" alt="Git" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.vcs.Git**
+
+<img width="30" src="/img/resources/onprem/vcs/gitea.png" alt="Gitea" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.vcs.Gitea**
+
+<img width="30" src="/img/resources/onprem/vcs/github.png" alt="Github" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.vcs.Github**
+
+<img width="30" src="/img/resources/onprem/vcs/gitlab.png" alt="Gitlab" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.vcs.Gitlab**
+
+<img width="30" src="/img/resources/onprem/vcs/svn.png" alt="Svn" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.vcs.Svn**
 
 ## onprem.workflow
 
-- **diagrams.onprem.workflow.Airflow**
-- **diagrams.onprem.workflow.Digdag**
-- **diagrams.onprem.workflow.Kubeflow**, **KubeFlow** (alias)
-- **diagrams.onprem.workflow.Nifi**, **NiFi** (alias)
+
+<img width="30" src="/img/resources/onprem/workflow/airflow.png" alt="Airflow" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.workflow.Airflow**
+
+<img width="30" src="/img/resources/onprem/workflow/digdag.png" alt="Digdag" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.workflow.Digdag**
+
+<img width="30" src="/img/resources/onprem/workflow/kubeflow.png" alt="Kubeflow" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.workflow.Kubeflow**, **KubeFlow** (alias)
+
+<img width="30" src="/img/resources/onprem/workflow/nifi.png" alt="Nifi" style="float: left; padding-right: 5px;" >
+**diagrams.onprem.workflow.Nifi**, **NiFi** (alias)

docs/nodes/openstack.md

@@ -7,107 +7,207 @@ Node classes list of openstack provider.
 
 ## openstack.apiproxies
 
-- **diagrams.openstack.apiproxies.EC2API**
+
+<img width="30" src="/img/resources/openstack/apiproxies/ec2api.png" alt="EC2API" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.apiproxies.EC2API**
 
 ## openstack.applicationlifecycle
 
-- **diagrams.openstack.applicationlifecycle.Freezer**
-- **diagrams.openstack.applicationlifecycle.Masakari**
-- **diagrams.openstack.applicationlifecycle.Murano**
-- **diagrams.openstack.applicationlifecycle.Solum**
+
+<img width="30" src="/img/resources/openstack/applicationlifecycle/freezer.png" alt="Freezer" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.applicationlifecycle.Freezer**
+
+<img width="30" src="/img/resources/openstack/applicationlifecycle/masakari.png" alt="Masakari" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.applicationlifecycle.Masakari**
+
+<img width="30" src="/img/resources/openstack/applicationlifecycle/murano.png" alt="Murano" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.applicationlifecycle.Murano**
+
+<img width="30" src="/img/resources/openstack/applicationlifecycle/solum.png" alt="Solum" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.applicationlifecycle.Solum**
 
 ## openstack.baremetal
 
-- **diagrams.openstack.baremetal.Cyborg**
-- **diagrams.openstack.baremetal.Ironic**
+
+<img width="30" src="/img/resources/openstack/baremetal/cyborg.png" alt="Cyborg" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.baremetal.Cyborg**
+
+<img width="30" src="/img/resources/openstack/baremetal/ironic.png" alt="Ironic" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.baremetal.Ironic**
 
 ## openstack.billing
 
-- **diagrams.openstack.billing.Cloudkitty**, **CloudKitty** (alias)
+
+<img width="30" src="/img/resources/openstack/billing/cloudkitty.png" alt="Cloudkitty" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.billing.Cloudkitty**, **CloudKitty** (alias)
 
 ## openstack.compute
 
-- **diagrams.openstack.compute.Nova**
-- **diagrams.openstack.compute.Qinling**
-- **diagrams.openstack.compute.Zun**
+
+<img width="30" src="/img/resources/openstack/compute/nova.png" alt="Nova" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.compute.Nova**
+
+<img width="30" src="/img/resources/openstack/compute/qinling.png" alt="Qinling" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.compute.Qinling**
+
+<img width="30" src="/img/resources/openstack/compute/zun.png" alt="Zun" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.compute.Zun**
 
 ## openstack.containerservices
 
-- **diagrams.openstack.containerservices.Kuryr**
+
+<img width="30" src="/img/resources/openstack/containerservices/kuryr.png" alt="Kuryr" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.containerservices.Kuryr**
 
 ## openstack.deployment
 
-- **diagrams.openstack.deployment.Ansible**
-- **diagrams.openstack.deployment.Charms**
-- **diagrams.openstack.deployment.Chef**
-- **diagrams.openstack.deployment.Helm**
-- **diagrams.openstack.deployment.Kolla**, **KollaAnsible** (alias)
-- **diagrams.openstack.deployment.Tripleo**, **TripleO** (alias)
+
+<img width="30" src="/img/resources/openstack/deployment/ansible.png" alt="Ansible" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.deployment.Ansible**
+
+<img width="30" src="/img/resources/openstack/deployment/charms.png" alt="Charms" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.deployment.Charms**
+
+<img width="30" src="/img/resources/openstack/deployment/chef.png" alt="Chef" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.deployment.Chef**
+
+<img width="30" src="/img/resources/openstack/deployment/helm.png" alt="Helm" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.deployment.Helm**
+
+<img width="30" src="/img/resources/openstack/deployment/kolla.png" alt="Kolla" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.deployment.Kolla**, **KollaAnsible** (alias)
+
+<img width="30" src="/img/resources/openstack/deployment/tripleo.png" alt="Tripleo" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.deployment.Tripleo**, **TripleO** (alias)
 
 ## openstack.frontend
 
-- **diagrams.openstack.frontend.Horizon**
+
+<img width="30" src="/img/resources/openstack/frontend/horizon.png" alt="Horizon" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.frontend.Horizon**
 
 ## openstack.monitoring
 
-- **diagrams.openstack.monitoring.Monasca**
-- **diagrams.openstack.monitoring.Telemetry**
+
+<img width="30" src="/img/resources/openstack/monitoring/monasca.png" alt="Monasca" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.monitoring.Monasca**
+
+<img width="30" src="/img/resources/openstack/monitoring/telemetry.png" alt="Telemetry" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.monitoring.Telemetry**
 
 ## openstack.multiregion
 
-- **diagrams.openstack.multiregion.Tricircle**
+
+<img width="30" src="/img/resources/openstack/multiregion/tricircle.png" alt="Tricircle" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.multiregion.Tricircle**
 
 ## openstack.networking
 
-- **diagrams.openstack.networking.Designate**
-- **diagrams.openstack.networking.Neutron**
-- **diagrams.openstack.networking.Octavia**
+
+<img width="30" src="/img/resources/openstack/networking/designate.png" alt="Designate" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.networking.Designate**
+
+<img width="30" src="/img/resources/openstack/networking/neutron.png" alt="Neutron" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.networking.Neutron**
+
+<img width="30" src="/img/resources/openstack/networking/octavia.png" alt="Octavia" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.networking.Octavia**
 
 ## openstack.nfv
 
-- **diagrams.openstack.nfv.Tacker**
+
+<img width="30" src="/img/resources/openstack/nfv/tacker.png" alt="Tacker" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.nfv.Tacker**
 
 ## openstack.optimization
 
-- **diagrams.openstack.optimization.Congress**
-- **diagrams.openstack.optimization.Rally**
-- **diagrams.openstack.optimization.Vitrage**
-- **diagrams.openstack.optimization.Watcher**
+
+<img width="30" src="/img/resources/openstack/optimization/congress.png" alt="Congress" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.optimization.Congress**
+
+<img width="30" src="/img/resources/openstack/optimization/rally.png" alt="Rally" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.optimization.Rally**
+
+<img width="30" src="/img/resources/openstack/optimization/vitrage.png" alt="Vitrage" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.optimization.Vitrage**
+
+<img width="30" src="/img/resources/openstack/optimization/watcher.png" alt="Watcher" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.optimization.Watcher**
 
 ## openstack.orchestration
 
-- **diagrams.openstack.orchestration.Blazar**
-- **diagrams.openstack.orchestration.Heat**
-- **diagrams.openstack.orchestration.Mistral**
-- **diagrams.openstack.orchestration.Senlin**
-- **diagrams.openstack.orchestration.Zaqar**
+
+<img width="30" src="/img/resources/openstack/orchestration/blazar.png" alt="Blazar" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.orchestration.Blazar**
+
+<img width="30" src="/img/resources/openstack/orchestration/heat.png" alt="Heat" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.orchestration.Heat**
+
+<img width="30" src="/img/resources/openstack/orchestration/mistral.png" alt="Mistral" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.orchestration.Mistral**
+
+<img width="30" src="/img/resources/openstack/orchestration/senlin.png" alt="Senlin" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.orchestration.Senlin**
+
+<img width="30" src="/img/resources/openstack/orchestration/zaqar.png" alt="Zaqar" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.orchestration.Zaqar**
 
 ## openstack.packaging
 
-- **diagrams.openstack.packaging.LOCI**
-- **diagrams.openstack.packaging.Puppet**
-- **diagrams.openstack.packaging.RPM**
+
+<img width="30" src="/img/resources/openstack/packaging/loci.png" alt="LOCI" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.packaging.LOCI**
+
+<img width="30" src="/img/resources/openstack/packaging/puppet.png" alt="Puppet" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.packaging.Puppet**
+
+<img width="30" src="/img/resources/openstack/packaging/rpm.png" alt="RPM" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.packaging.RPM**
 
 ## openstack.sharedservices
 
-- **diagrams.openstack.sharedservices.Barbican**
-- **diagrams.openstack.sharedservices.Glance**
-- **diagrams.openstack.sharedservices.Karbor**
-- **diagrams.openstack.sharedservices.Keystone**
-- **diagrams.openstack.sharedservices.Searchlight**
+
+<img width="30" src="/img/resources/openstack/sharedservices/barbican.png" alt="Barbican" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.sharedservices.Barbican**
+
+<img width="30" src="/img/resources/openstack/sharedservices/glance.png" alt="Glance" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.sharedservices.Glance**
+
+<img width="30" src="/img/resources/openstack/sharedservices/karbor.png" alt="Karbor" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.sharedservices.Karbor**
+
+<img width="30" src="/img/resources/openstack/sharedservices/keystone.png" alt="Keystone" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.sharedservices.Keystone**
+
+<img width="30" src="/img/resources/openstack/sharedservices/searchlight.png" alt="Searchlight" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.sharedservices.Searchlight**
 
 ## openstack.storage
 
-- **diagrams.openstack.storage.Cinder**
-- **diagrams.openstack.storage.Manila**
-- **diagrams.openstack.storage.Swift**
+
+<img width="30" src="/img/resources/openstack/storage/cinder.png" alt="Cinder" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.storage.Cinder**
+
+<img width="30" src="/img/resources/openstack/storage/manila.png" alt="Manila" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.storage.Manila**
+
+<img width="30" src="/img/resources/openstack/storage/swift.png" alt="Swift" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.storage.Swift**
 
 ## openstack.user
 
-- **diagrams.openstack.user.Openstackclient**, **OpenStackClient** (alias)
+
+<img width="30" src="/img/resources/openstack/user/openstackclient.png" alt="Openstackclient" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.user.Openstackclient**, **OpenStackClient** (alias)
 
 ## openstack.workloadprovisioning
 
-- **diagrams.openstack.workloadprovisioning.Magnum**
-- **diagrams.openstack.workloadprovisioning.Sahara**
-- **diagrams.openstack.workloadprovisioning.Trove**
+
+<img width="30" src="/img/resources/openstack/workloadprovisioning/magnum.png" alt="Magnum" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.workloadprovisioning.Magnum**
+
+<img width="30" src="/img/resources/openstack/workloadprovisioning/sahara.png" alt="Sahara" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.workloadprovisioning.Sahara**
+
+<img width="30" src="/img/resources/openstack/workloadprovisioning/trove.png" alt="Trove" style="float: left; padding-right: 5px;" >
+**diagrams.openstack.workloadprovisioning.Trove**

docs/nodes/outscale.md

@@ -7,24 +7,48 @@ Node classes list of outscale provider.
 
 ## outscale.compute
 
-- **diagrams.outscale.compute.Compute**
-- **diagrams.outscale.compute.DirectConnect**
+
+<img width="30" src="/img/resources/outscale/compute/compute.png" alt="Compute" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.compute.Compute**
+
+<img width="30" src="/img/resources/outscale/compute/direct-connect.png" alt="DirectConnect" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.compute.DirectConnect**
 
 ## outscale.network
 
-- **diagrams.outscale.network.ClientVpn**
-- **diagrams.outscale.network.InternetService**
-- **diagrams.outscale.network.LoadBalancer**
-- **diagrams.outscale.network.NatService**
-- **diagrams.outscale.network.Net**
-- **diagrams.outscale.network.SiteToSiteVpng**
+
+<img width="30" src="/img/resources/outscale/network/client-vpn.png" alt="ClientVpn" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.network.ClientVpn**
+
+<img width="30" src="/img/resources/outscale/network/internet-service.png" alt="InternetService" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.network.InternetService**
+
+<img width="30" src="/img/resources/outscale/network/load-balancer.png" alt="LoadBalancer" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.network.LoadBalancer**
+
+<img width="30" src="/img/resources/outscale/network/nat-service.png" alt="NatService" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.network.NatService**
+
+<img width="30" src="/img/resources/outscale/network/net.png" alt="Net" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.network.Net**
+
+<img width="30" src="/img/resources/outscale/network/site-to-site-vpng.png" alt="SiteToSiteVpng" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.network.SiteToSiteVpng**
 
 ## outscale.security
 
-- **diagrams.outscale.security.Firewall**
-- **diagrams.outscale.security.IdentityAndAccessManagement**
+
+<img width="30" src="/img/resources/outscale/security/firewall.png" alt="Firewall" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.security.Firewall**
+
+<img width="30" src="/img/resources/outscale/security/identity-and-access-management.png" alt="IdentityAndAccessManagement" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.security.IdentityAndAccessManagement**
 
 ## outscale.storage
 
-- **diagrams.outscale.storage.SimpleStorageService**
-- **diagrams.outscale.storage.Storage**
+
+<img width="30" src="/img/resources/outscale/storage/simple-storage-service.png" alt="SimpleStorageService" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.storage.SimpleStorageService**
+
+<img width="30" src="/img/resources/outscale/storage/storage.png" alt="Storage" style="float: left; padding-right: 5px;" >
+**diagrams.outscale.storage.Storage**

docs/nodes/programming.md

@@ -7,74 +7,198 @@ Node classes list of programming provider.
 
 ## programming.flowchart
 
-- **diagrams.programming.flowchart.Action**
-- **diagrams.programming.flowchart.Collate**
-- **diagrams.programming.flowchart.Database**
-- **diagrams.programming.flowchart.Decision**
-- **diagrams.programming.flowchart.Delay**
-- **diagrams.programming.flowchart.Display**
-- **diagrams.programming.flowchart.Document**
-- **diagrams.programming.flowchart.InputOutput**
-- **diagrams.programming.flowchart.Inspection**
-- **diagrams.programming.flowchart.InternalStorage**
-- **diagrams.programming.flowchart.LoopLimit**
-- **diagrams.programming.flowchart.ManualInput**
-- **diagrams.programming.flowchart.ManualLoop**
-- **diagrams.programming.flowchart.Merge**
-- **diagrams.programming.flowchart.MultipleDocuments**
-- **diagrams.programming.flowchart.OffPageConnectorLeft**
-- **diagrams.programming.flowchart.OffPageConnectorRight**
-- **diagrams.programming.flowchart.Or**
-- **diagrams.programming.flowchart.PredefinedProcess**
-- **diagrams.programming.flowchart.Preparation**
-- **diagrams.programming.flowchart.Sort**
-- **diagrams.programming.flowchart.StartEnd**
-- **diagrams.programming.flowchart.StoredData**
-- **diagrams.programming.flowchart.SummingJunction**
+
+<img width="30" src="/img/resources/programming/flowchart/action.png" alt="Action" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Action**
+
+<img width="30" src="/img/resources/programming/flowchart/collate.png" alt="Collate" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Collate**
+
+<img width="30" src="/img/resources/programming/flowchart/database.png" alt="Database" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Database**
+
+<img width="30" src="/img/resources/programming/flowchart/decision.png" alt="Decision" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Decision**
+
+<img width="30" src="/img/resources/programming/flowchart/delay.png" alt="Delay" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Delay**
+
+<img width="30" src="/img/resources/programming/flowchart/display.png" alt="Display" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Display**
+
+<img width="30" src="/img/resources/programming/flowchart/document.png" alt="Document" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Document**
+
+<img width="30" src="/img/resources/programming/flowchart/input-output.png" alt="InputOutput" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.InputOutput**
+
+<img width="30" src="/img/resources/programming/flowchart/inspection.png" alt="Inspection" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Inspection**
+
+<img width="30" src="/img/resources/programming/flowchart/internal-storage.png" alt="InternalStorage" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.InternalStorage**
+
+<img width="30" src="/img/resources/programming/flowchart/loop-limit.png" alt="LoopLimit" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.LoopLimit**
+
+<img width="30" src="/img/resources/programming/flowchart/manual-input.png" alt="ManualInput" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.ManualInput**
+
+<img width="30" src="/img/resources/programming/flowchart/manual-loop.png" alt="ManualLoop" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.ManualLoop**
+
+<img width="30" src="/img/resources/programming/flowchart/merge.png" alt="Merge" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Merge**
+
+<img width="30" src="/img/resources/programming/flowchart/multiple-documents.png" alt="MultipleDocuments" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.MultipleDocuments**
+
+<img width="30" src="/img/resources/programming/flowchart/off-page-connector-left.png" alt="OffPageConnectorLeft" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.OffPageConnectorLeft**
+
+<img width="30" src="/img/resources/programming/flowchart/off-page-connector-right.png" alt="OffPageConnectorRight" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.OffPageConnectorRight**
+
+<img width="30" src="/img/resources/programming/flowchart/or.png" alt="Or" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Or**
+
+<img width="30" src="/img/resources/programming/flowchart/predefined-process.png" alt="PredefinedProcess" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.PredefinedProcess**
+
+<img width="30" src="/img/resources/programming/flowchart/preparation.png" alt="Preparation" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Preparation**
+
+<img width="30" src="/img/resources/programming/flowchart/sort.png" alt="Sort" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.Sort**
+
+<img width="30" src="/img/resources/programming/flowchart/start-end.png" alt="StartEnd" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.StartEnd**
+
+<img width="30" src="/img/resources/programming/flowchart/stored-data.png" alt="StoredData" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.StoredData**
+
+<img width="30" src="/img/resources/programming/flowchart/summing-junction.png" alt="SummingJunction" style="float: left; padding-right: 5px;" >
+**diagrams.programming.flowchart.SummingJunction**
 
 ## programming.framework
 
-- **diagrams.programming.framework.Angular**
-- **diagrams.programming.framework.Backbone**
-- **diagrams.programming.framework.Django**
-- **diagrams.programming.framework.Ember**
-- **diagrams.programming.framework.Fastapi**, **FastAPI** (alias)
-- **diagrams.programming.framework.Flask**
-- **diagrams.programming.framework.Flutter**
-- **diagrams.programming.framework.Graphql**, **GraphQL** (alias)
-- **diagrams.programming.framework.Laravel**
-- **diagrams.programming.framework.Micronaut**
-- **diagrams.programming.framework.Rails**
-- **diagrams.programming.framework.React**
-- **diagrams.programming.framework.Spring**
-- **diagrams.programming.framework.Starlette**
-- **diagrams.programming.framework.Vue**
+
+<img width="30" src="/img/resources/programming/framework/angular.png" alt="Angular" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Angular**
+
+<img width="30" src="/img/resources/programming/framework/backbone.png" alt="Backbone" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Backbone**
+
+<img width="30" src="/img/resources/programming/framework/django.png" alt="Django" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Django**
+
+<img width="30" src="/img/resources/programming/framework/ember.png" alt="Ember" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Ember**
+
+<img width="30" src="/img/resources/programming/framework/fastapi.png" alt="Fastapi" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Fastapi**, **FastAPI** (alias)
+
+<img width="30" src="/img/resources/programming/framework/flask.png" alt="Flask" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Flask**
+
+<img width="30" src="/img/resources/programming/framework/flutter.png" alt="Flutter" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Flutter**
+
+<img width="30" src="/img/resources/programming/framework/graphql.png" alt="Graphql" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Graphql**, **GraphQL** (alias)
+
+<img width="30" src="/img/resources/programming/framework/laravel.png" alt="Laravel" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Laravel**
+
+<img width="30" src="/img/resources/programming/framework/micronaut.png" alt="Micronaut" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Micronaut**
+
+<img width="30" src="/img/resources/programming/framework/rails.png" alt="Rails" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Rails**
+
+<img width="30" src="/img/resources/programming/framework/react.png" alt="React" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.React**
+
+<img width="30" src="/img/resources/programming/framework/spring.png" alt="Spring" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Spring**
+
+<img width="30" src="/img/resources/programming/framework/starlette.png" alt="Starlette" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Starlette**
+
+<img width="30" src="/img/resources/programming/framework/vue.png" alt="Vue" style="float: left; padding-right: 5px;" >
+**diagrams.programming.framework.Vue**
 
 ## programming.language
 
-- **diagrams.programming.language.Bash**
-- **diagrams.programming.language.C**
-- **diagrams.programming.language.Cpp**
-- **diagrams.programming.language.Csharp**
-- **diagrams.programming.language.Dart**
-- **diagrams.programming.language.Elixir**
-- **diagrams.programming.language.Erlang**
-- **diagrams.programming.language.Go**
-- **diagrams.programming.language.Java**
-- **diagrams.programming.language.Javascript**, **JavaScript** (alias)
-- **diagrams.programming.language.Kotlin**
-- **diagrams.programming.language.Latex**
-- **diagrams.programming.language.Matlab**
-- **diagrams.programming.language.Nodejs**, **NodeJS** (alias)
-- **diagrams.programming.language.Php**, **PHP** (alias)
-- **diagrams.programming.language.Python**
-- **diagrams.programming.language.R**
-- **diagrams.programming.language.Ruby**
-- **diagrams.programming.language.Rust**
-- **diagrams.programming.language.Scala**
-- **diagrams.programming.language.Swift**
-- **diagrams.programming.language.Typescript**, **TypeScript** (alias)
+
+<img width="30" src="/img/resources/programming/language/bash.png" alt="Bash" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Bash**
+
+<img width="30" src="/img/resources/programming/language/c.png" alt="C" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.C**
+
+<img width="30" src="/img/resources/programming/language/cpp.png" alt="Cpp" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Cpp**
+
+<img width="30" src="/img/resources/programming/language/csharp.png" alt="Csharp" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Csharp**
+
+<img width="30" src="/img/resources/programming/language/dart.png" alt="Dart" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Dart**
+
+<img width="30" src="/img/resources/programming/language/elixir.png" alt="Elixir" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Elixir**
+
+<img width="30" src="/img/resources/programming/language/erlang.png" alt="Erlang" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Erlang**
+
+<img width="30" src="/img/resources/programming/language/go.png" alt="Go" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Go**
+
+<img width="30" src="/img/resources/programming/language/java.png" alt="Java" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Java**
+
+<img width="30" src="/img/resources/programming/language/javascript.png" alt="Javascript" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Javascript**, **JavaScript** (alias)
+
+<img width="30" src="/img/resources/programming/language/kotlin.png" alt="Kotlin" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Kotlin**
+
+<img width="30" src="/img/resources/programming/language/latex.png" alt="Latex" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Latex**
+
+<img width="30" src="/img/resources/programming/language/matlab.png" alt="Matlab" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Matlab**
+
+<img width="30" src="/img/resources/programming/language/nodejs.png" alt="Nodejs" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Nodejs**, **NodeJS** (alias)
+
+<img width="30" src="/img/resources/programming/language/php.png" alt="Php" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Php**, **PHP** (alias)
+
+<img width="30" src="/img/resources/programming/language/python.png" alt="Python" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Python**
+
+<img width="30" src="/img/resources/programming/language/r.png" alt="R" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.R**
+
+<img width="30" src="/img/resources/programming/language/ruby.png" alt="Ruby" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Ruby**
+
+<img width="30" src="/img/resources/programming/language/rust.png" alt="Rust" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Rust**
+
+<img width="30" src="/img/resources/programming/language/scala.png" alt="Scala" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Scala**
+
+<img width="30" src="/img/resources/programming/language/swift.png" alt="Swift" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Swift**
+
+<img width="30" src="/img/resources/programming/language/typescript.png" alt="Typescript" style="float: left; padding-right: 5px;" >
+**diagrams.programming.language.Typescript**, **TypeScript** (alias)
 
 ## programming.runtime
 
-- **diagrams.programming.runtime.Dapr**
+
+<img width="30" src="/img/resources/programming/runtime/dapr.png" alt="Dapr" style="float: left; padding-right: 5px;" >
+**diagrams.programming.runtime.Dapr**

docs/nodes/saas.md

@@ -7,61 +7,117 @@ Node classes list of saas provider.
 
 ## saas.alerting
 
-- **diagrams.saas.alerting.Newrelic**
-- **diagrams.saas.alerting.Opsgenie**
-- **diagrams.saas.alerting.Pushover**
-- **diagrams.saas.alerting.Xmatters**
+
+<img width="30" src="/img/resources/saas/alerting/newrelic.png" alt="Newrelic" style="float: left; padding-right: 5px;" >
+**diagrams.saas.alerting.Newrelic**
+
+<img width="30" src="/img/resources/saas/alerting/opsgenie.png" alt="Opsgenie" style="float: left; padding-right: 5px;" >
+**diagrams.saas.alerting.Opsgenie**
+
+<img width="30" src="/img/resources/saas/alerting/pushover.png" alt="Pushover" style="float: left; padding-right: 5px;" >
+**diagrams.saas.alerting.Pushover**
+
+<img width="30" src="/img/resources/saas/alerting/xmatters.png" alt="Xmatters" style="float: left; padding-right: 5px;" >
+**diagrams.saas.alerting.Xmatters**
 
 ## saas.analytics
 
-- **diagrams.saas.analytics.Snowflake**
-- **diagrams.saas.analytics.Stitch**
+
+<img width="30" src="/img/resources/saas/analytics/snowflake.png" alt="Snowflake" style="float: left; padding-right: 5px;" >
+**diagrams.saas.analytics.Snowflake**
+
+<img width="30" src="/img/resources/saas/analytics/stitch.png" alt="Stitch" style="float: left; padding-right: 5px;" >
+**diagrams.saas.analytics.Stitch**
 
 ## saas.cdn
 
-- **diagrams.saas.cdn.Akamai**
-- **diagrams.saas.cdn.Cloudflare**
-- **diagrams.saas.cdn.Fastly**
+
+<img width="30" src="/img/resources/saas/cdn/akamai.png" alt="Akamai" style="float: left; padding-right: 5px;" >
+**diagrams.saas.cdn.Akamai**
+
+<img width="30" src="/img/resources/saas/cdn/cloudflare.png" alt="Cloudflare" style="float: left; padding-right: 5px;" >
+**diagrams.saas.cdn.Cloudflare**
+
+<img width="30" src="/img/resources/saas/cdn/fastly.png" alt="Fastly" style="float: left; padding-right: 5px;" >
+**diagrams.saas.cdn.Fastly**
 
 ## saas.chat
 
-- **diagrams.saas.chat.Discord**
-- **diagrams.saas.chat.Mattermost**
-- **diagrams.saas.chat.RocketChat**
-- **diagrams.saas.chat.Slack**
-- **diagrams.saas.chat.Teams**
-- **diagrams.saas.chat.Telegram**
-- **diagrams.saas.chat.Messenger**
-- **diagrams.saas.chat.Line**
 
-## saas.filesharing
+<img width="30" src="/img/resources/saas/chat/discord.png" alt="Discord" style="float: left; padding-right: 5px;" >
+**diagrams.saas.chat.Discord**
+
+<img width="30" src="/img/resources/saas/chat/line.png" alt="Line" style="float: left; padding-right: 5px;" >
+**diagrams.saas.chat.Line**
+
+<img width="30" src="/img/resources/saas/chat/mattermost.png" alt="Mattermost" style="float: left; padding-right: 5px;" >
+**diagrams.saas.chat.Mattermost**
+
+<img width="30" src="/img/resources/saas/chat/messenger.png" alt="Messenger" style="float: left; padding-right: 5px;" >
+**diagrams.saas.chat.Messenger**
+
+<img width="30" src="/img/resources/saas/chat/rocket-chat.png" alt="RocketChat" style="float: left; padding-right: 5px;" >
+**diagrams.saas.chat.RocketChat**
+
+<img width="30" src="/img/resources/saas/chat/slack.png" alt="Slack" style="float: left; padding-right: 5px;" >
+**diagrams.saas.chat.Slack**
 
-- **diagrams.saas.filesharing.Nextcloud**
+<img width="30" src="/img/resources/saas/chat/teams.png" alt="Teams" style="float: left; padding-right: 5px;" >
+**diagrams.saas.chat.Teams**
+
+<img width="30" src="/img/resources/saas/chat/telegram.png" alt="Telegram" style="float: left; padding-right: 5px;" >
+**diagrams.saas.chat.Telegram**
 
 ## saas.communication
 
-- **diagrams.saas.communication.Twilio**
+
+<img width="30" src="/img/resources/saas/communication/twilio.png" alt="Twilio" style="float: left; padding-right: 5px;" >
+**diagrams.saas.communication.Twilio**
+
+## saas.filesharing
+
+
+<img width="30" src="/img/resources/saas/filesharing/nextcloud.png" alt="Nextcloud" style="float: left; padding-right: 5px;" >
+**diagrams.saas.filesharing.Nextcloud**
 
 ## saas.identity
 
-- **diagrams.saas.identity.Auth0**
-- **diagrams.saas.identity.Okta**
+
+<img width="30" src="/img/resources/saas/identity/auth0.png" alt="Auth0" style="float: left; padding-right: 5px;" >
+**diagrams.saas.identity.Auth0**
+
+<img width="30" src="/img/resources/saas/identity/okta.png" alt="Okta" style="float: left; padding-right: 5px;" >
+**diagrams.saas.identity.Okta**
 
 ## saas.logging
 
-- **diagrams.saas.logging.Datadog**, **DataDog** (alias)
-- **diagrams.saas.logging.Newrelic**, **NewRelic** (alias)
-- **diagrams.saas.logging.Papertrail**
+
+<img width="30" src="/img/resources/saas/logging/datadog.png" alt="Datadog" style="float: left; padding-right: 5px;" >
+**diagrams.saas.logging.Datadog**, **DataDog** (alias)
+
+<img width="30" src="/img/resources/saas/logging/newrelic.png" alt="Newrelic" style="float: left; padding-right: 5px;" >
+**diagrams.saas.logging.Newrelic**, **NewRelic** (alias)
+
+<img width="30" src="/img/resources/saas/logging/papertrail.png" alt="Papertrail" style="float: left; padding-right: 5px;" >
+**diagrams.saas.logging.Papertrail**
 
 ## saas.media
 
-- **diagrams.saas.media.Cloudinary**
+
+<img width="30" src="/img/resources/saas/media/cloudinary.png" alt="Cloudinary" style="float: left; padding-right: 5px;" >
+**diagrams.saas.media.Cloudinary**
 
 ## saas.recommendation
 
-- **diagrams.saas.recommendation.Recombee**
+
+<img width="30" src="/img/resources/saas/recommendation/recombee.png" alt="Recombee" style="float: left; padding-right: 5px;" >
+**diagrams.saas.recommendation.Recombee**
 
 ## saas.social
 
-- **diagrams.saas.social.Facebook**
-- **diagrams.saas.social.Twitter**
+
+<img width="30" src="/img/resources/saas/social/facebook.png" alt="Facebook" style="float: left; padding-right: 5px;" >
+**diagrams.saas.social.Facebook**
+
+<img width="30" src="/img/resources/saas/social/twitter.png" alt="Twitter" style="float: left; padding-right: 5px;" >
+**diagrams.saas.social.Twitter**

scripts/__init__.py

@@ -4,21 +4,21 @@ from pathlib import Path
 import config as cfg
 
 
+def base_dir() -> str:
+    return Path(os.path.abspath(os.path.dirname(__file__))).parent
+
+
 def app_root_dir(pvd: str) -> str:
-    basedir = Path(os.path.abspath(os.path.dirname(__file__)))
-    return os.path.join(basedir.parent, cfg.DIR_APP_ROOT, pvd)
+    return os.path.join(base_dir(), cfg.DIR_APP_ROOT, pvd)
 
 
 def doc_root_dir() -> str:
-    basedir = Path(os.path.abspath(os.path.dirname(__file__)))
-    return os.path.join(basedir.parent, cfg.DIR_DOC_ROOT)
+    return os.path.join(base_dir(), cfg.DIR_DOC_ROOT)
 
 
 def resource_dir(pvd: str) -> str:
-    basedir = Path(os.path.abspath(os.path.dirname(__file__)))
-    return os.path.join(basedir.parent, cfg.DIR_RESOURCE, pvd)
+    return os.path.join(base_dir(), cfg.DIR_RESOURCE, pvd)
 
 
 def template_dir() -> str:
-    basedir = Path(os.path.abspath(os.path.dirname(__file__)))
-    return os.path.join(basedir.parent, cfg.DIR_TEMPLATE)
+    return os.path.join(base_dir(), cfg.DIR_TEMPLATE)

scripts/generate.py

@@ -5,7 +5,7 @@ from typing import Iterable
 from jinja2 import Environment, FileSystemLoader, Template, exceptions
 
 import config as cfg
-from . import app_root_dir, doc_root_dir, resource_dir, template_dir
+from . import app_root_dir, doc_root_dir, resource_dir, template_dir, base_dir
 
 _usage = "Usage: generate.py <provider>"
 
@@ -55,11 +55,13 @@ def gen_apidoc(pvd: str, typ_paths: dict) -> str:
         return name
 
     typ_classes = {}
-    for typ, paths in sorted(typ_paths.items()):
+    for typ, (paths, resource_root) in sorted(typ_paths.items()):
         typ_classes[typ] = []
-        for name in map(_gen_class_name, paths):
+        for path in paths:
+            name = _gen_class_name(path)
+            resource_path = os.path.join(resource_root, path)
             alias = cfg.ALIASES[pvd].get(typ, {}).get(name)
-            typ_classes[typ].append({"name": name, "alias": alias})
+            typ_classes[typ].append({"name": name, "alias": alias, "resource_path": resource_path})
     return tmpl.render(pvd=pvd, typ_classes=typ_classes)
 
 
@@ -80,6 +82,7 @@ def make_apidoc(pvd: str, content: str) -> None:
 def generate(pvd: str) -> None:
     """Generates a service node classes."""
     typ_paths = {}
+    base = base_dir()
     for root, _, files in os.walk(resource_dir(pvd)):
         # Extract the names and paths from resources.
         files.sort()
@@ -91,10 +94,11 @@ def generate(pvd: str) -> None:
         if typ == pvd:
             continue
 
+        resource_root = os.path.relpath(root, base)
         classes = gen_classes(pvd, typ, paths)
         make_module(pvd, typ, classes)
 
-        typ_paths[typ] = paths
+        typ_paths[typ] = (paths, resource_root)
     # Build API documentation
     apidoc = gen_apidoc(pvd, typ_paths)
     make_apidoc(pvd, apidoc)

templates/apidoc.tmpl

@@ -7,5 +7,7 @@ Node classes list of {{ pvd }} provider.
 {% for typ, classes in typ_classes.items() %}
 ## {{ pvd }}.{{ typ }}
 {% for class in classes %}
-- **diagrams.{{ pvd }}.{{ typ }}.{{ class['name'] }}**{% if class['alias'] %}, **{{ class['alias'] }}** (alias){% endif %}{% endfor %}
+
+<img width="30" src="/img/{{ class['resource_path'] }}" alt="{{ class['name'] }}" style="float: left; padding-right: 5px;" >
+**diagrams.{{ pvd }}.{{ typ }}.{{ class['name'] }}**{% if class['alias'] %}, **{{ class['alias'] }}** (alias){% endif %}{% endfor %}
 {% endfor %}