Web and application security is a layered discipline that spans cryptography, protocol design, threat modeling, and defensive coding practices. Understanding how attacks work — and how defenses are structured — is essential for every developer shipping code to production.

This collection covers the core security concepts you encounter building modern web applications and APIs. Start with the cryptographic foundations: TLS Certificate Validation and Certificate Authority Chain show how trust is established over HTTPS, while Public Key Encryption and Digital Signature Workflow explain the asymmetric cryptography that underpins it. For data integrity, HMAC Signing Process and API Request Signing demonstrate how requests are authenticated at the message level.

Defensive patterns for web applications are covered in depth: CSRF Protection Flow, CORS Request Flow, and Content Security Policy Flow address the browser-level controls that prevent cross-origin attacks. Attack vectors including XSS Attack Flow and SQL Injection Attack illustrate how common exploits work so you can design effective mitigations.

Infrastructure security is represented by Secure API Gateway, Firewall Rule Processing, Security Audit Logging, Threat Detection Pipeline, and Security Incident Response. Every diagram is free to edit and export directly in Graphlet.

All diagrams 20 examples
TLS Certificate Validation sequence diagram
TLS Certificate Validation
sequence
Public Key Encryption flowchart diagram
Public Key Encryption
flowchart
Digital Signature Workflow sequence diagram
Digital Signature Workflow
sequence
Certificate Authority Chain flowchart diagram
Certificate Authority Chain
flowchart
HMAC Signing Process flowchart diagram
HMAC Signing Process
flowchart
API Request Signing sequence diagram
API Request Signing
sequence
Password Hashing Flow flowchart diagram
Password Hashing Flow
flowchart
Secure Cookie Flow flowchart diagram
Secure Cookie Flow
flowchart
CSRF Protection Flow flowchart diagram
CSRF Protection Flow
flowchart
CORS Request Flow sequence diagram
CORS Request Flow
sequence
XSS Attack Flow flowchart diagram
XSS Attack Flow
flowchart
SQL Injection Attack flowchart diagram
SQL Injection Attack
flowchart
Content Security Policy Flow flowchart diagram
Content Security Policy Flow
flowchart
Secure Session Storage flowchart diagram
Secure Session Storage
flowchart
Token Based Authentication flowchart diagram
Token Based Authentication
flowchart
Secure API Gateway flowchart diagram
Secure API Gateway
flowchart
Firewall Rule Processing flowchart diagram
Firewall Rule Processing
flowchart
Security Audit Logging flowchart diagram
Security Audit Logging
flowchart
Threat Detection Pipeline flowchart diagram
Threat Detection Pipeline
flowchart
Security Incident Response flowchart diagram
Security Incident Response
flowchart

Frequently asked questions

Mermaid security diagrams are text-based flowcharts and sequence diagrams that visualize how security protocols, attack patterns, and defensive controls work. Because they are written in plain text, they version-control alongside code and can be rendered in any Markdown-aware tool.
The collection spans cryptographic foundations (TLS, PKI, HMAC, digital signatures), web application security (CORS, CSRF, XSS, SQL injection, CSP), session and token management, and infrastructure security including API gateways, firewalls, threat detection, and incident response.
Open any diagram page and click the "Edit in Graphlet" button. Graphlet loads the Mermaid source in a live editor where you can modify the diagram and export it as SVG or PNG at no cost.
Free online editor
Edit any diagram in Graphlet
Open, fork, and export to SVG or PNG. No sign-up required.
Open Graphlet →