Generate Professional Architecture Diagrams Instantly with Spring Boot 3

Introduction

Architecture diagrams are essential for system design, solution presentations, technical reviews, and interview showcases, but hand‑drawing them is time‑consuming and error‑prone. This article presents a powerful skill called Architecture Diagram Generator that automatically creates standardized, aesthetically pleasing, and maintainable diagrams without manual effort.

Installation

Official repository:

https://github.com/Cocoon-AI/architecture-diagram-generator

2.1 Install the Skill

Download the skill package from:

https://github.com/Cocoon-AI/architecture-diagram-generator/blob/main/architecture-diagram.zip

The article demonstrates installation using both OpenCode and Claude Code .

OpenCode global installation

Check the installation status:

Project‑level installation

In the demo project demo01, create a .opencdoe/skill directory and place the downloaded skill there.

Claude installation

Copy the skill to the following directory:

Verify the installation:

Features

Elegant dark theme – Slate‑950 background with subtle grid texture.

Semantic color coding – Unified colors for frontend, backend, database, cloud services, and security components.

Self‑contained output – Single HTML file with embedded CSS and inline SVG.

No dependencies – Works in any modern browser without JavaScript.

Professional typography – JetBrains Mono font for a technical aesthetic.

Smart layering – Arrows rendered behind component boxes for clarity.

Color Configuration

Frontend : teal – client applications, UI, edge devices.

Backend : emerald – servers, APIs, services.

Database : violet – databases, storage, AI/ML workloads.

Cloud / AWS : amber – cloud services, infrastructure.

Security : rose – authentication, security groups, encryption.

External : slate – generic external systems.

Example Diagrams (Official Samples)

Web Application (React + Node.js + PostgreSQL)

React frontend

Node.js/Express API

PostgreSQL database

Redis cache

JWT authentication

AWS Serverless (Lambda + API Gateway + DynamoDB)

CloudFront CDN

API Gateway

Node.js Lambda functions

DynamoDB database

S3 static asset storage

Cognito for authentication

Microservices (Kubernetes + API Gateway)

React web app and mobile clients

Kong API gateway

User service (Go), Order service (Java), Product service (Python)

PostgreSQL, MongoDB, Elasticsearch databases

Kafka for event streaming

Kubernetes orchestration

Generating Custom Diagrams

Using OpenCode, the skill generated a complete outpatient billing process diagram and several other custom diagrams, as shown in the following screenshots:

These examples illustrate how the skill can quickly produce professional architecture diagrams for a wide range of system designs.

For more Spring Boot articles, see the linked resources at the end of the original post.