Gallery
Collected .gg diagrams organised by application domain. Every example is a live render — each fenced gg-diagram block below is parsed, resolved, and drawn at build time.
The goal is to show the range: Gridgram's DSL works well beyond the "boxes and arrows in a cloud architecture" case it was originally sketched for. Examples collectively exercise every feature — regions, notes, badges, dashed lines, theme overrides, waypoints, sizeScale, labelScale — so the category read-through doubles as a feature tour.
Domains
Technology & engineering
- Infrastructure — cloud topology, zones, failover
- Microservices — service mesh, API gateway, saga
- Software architecture — layered, hexagonal, plugin
- Database — replicas, shards, CDC, caching
- API design — request lifecycle, versioning, middleware
- Event-driven — pub/sub, event sourcing, CQRS
- CI / CD — build pipelines, multi-env, feature previews
- Testing — test pyramid, matrix, environments
- Release & roadmap — rollout, deprecation, train
- Security & auth — OAuth2, mTLS, zero trust
- AI / ML — training, RAG, agent topology, serving
- Data pipelines — ETL, streaming, lambda, warehouse
- IoT / hardware — sensors, gateways, edge inference
Business & people
- Business workflow — approvals, invoices, tickets
- Customer journey — AARRR, onboarding, support
- Org chart — reporting, matrix, squads
- Project planning — dependencies, sprint, milestones
- Sales funnel — pirate metrics, B2B stages, segmentation
Operations & logistics
- Supply chain — upstream / production / downstream, returns
- Warehouse — zone layout, pick-and-pack route
- Manufacturing — line stages, quality gates
- Delivery — hub-and-spoke, last mile, returns
Knowledge & communication
- Education — concept maps, biology, history
- Knowledge graph — taxonomy, ontology, relations
How the gallery is rendered
Each page uses the gg-diagram fenced code block. The docs/.vitepress/plugins/gg-diagram.ts plugin parses every fence at build time and inlines the resulting SVG, so the gallery never ships raw .gg text to the browser — you see the rendered diagram directly.
Only Tabler built-ins and inline raw SVG are available in this mode; @alias/ paths, URLs, and file references are skipped (they'd need the async loader that markdown-it can't await). If you want those in a custom page, add an examples/<name>/ entry and use the <Example> component instead.