# FossFLOW — Beautiful Isometric Infrastructure Diagrams

> Generate stunning isometric architecture diagrams from simple YAML definitions. Visualize cloud infrastructure, network topologies, and system designs with zero design skills required.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

# FossFLOW — Beautiful Isometric Infrastructure Diagrams

## Quick Use
```bash
npm install -g fossflow
fossflow init my-diagram
fossflow render my-diagram/infra.yaml -o output.svg
```

## Introduction
FossFLOW turns YAML infrastructure definitions into polished isometric diagrams that look hand-crafted. Instead of wrestling with drawing tools or exporting clunky visuals from cloud consoles, you describe your architecture in a declarative file and get publication-ready SVG output in seconds.

## What FossFLOW Does
- Renders isometric 3D-style diagrams from YAML or JSON definitions
- Supports AWS, GCP, Azure, and generic infrastructure icon sets out of the box
- Generates SVG, PNG, and PDF output for docs, slides, and READMEs
- Provides a live preview server with hot-reload during editing
- Integrates with CI pipelines to keep diagrams in sync with IaC changes

## Architecture Overview
FossFLOW parses a declarative YAML schema that describes nodes (services, databases, queues) and edges (connections, data flows). A layout engine computes isometric coordinates, applies theming and icon packs, then renders via an SVG pipeline. The CLI wraps a TypeScript core that can also run as a library for programmatic diagram generation.

## Self-Hosting & Configuration
- Install globally via npm or use the official Docker image for CI environments
- Configure icon packs and themes in a `.fossflow.yaml` project config
- Custom icons can be added as SVG files in a local `icons/` directory
- Output resolution, padding, and color palette are adjustable per render
- Supports environment variable interpolation for dynamic labels in CI

## Key Features
- Declarative YAML syntax keeps diagrams version-controlled alongside code
- Isometric projection gives depth without the complexity of full 3D tools
- Built-in icon libraries cover 200+ cloud and infrastructure components
- Diff-friendly output means PRs show meaningful diagram changes
- Plugin system allows community themes and custom renderers

## Comparison with Similar Tools
- **Diagrams (Python)** — code-based but produces flat 2D output; FossFLOW focuses on isometric style
- **Mermaid** — great for flowcharts but limited for infrastructure topology views
- **Draw.io** — manual GUI tool; FossFLOW is code-first and CI-friendly
- **Structurizr** — focused on C4 model; FossFLOW is more general-purpose
- **Excalidraw** — hand-drawn aesthetic; FossFLOW targets polished documentation output

## FAQ
**Q: Can I use FossFLOW in a CI pipeline to auto-generate diagrams?**
A: Yes. The CLI runs headlessly and the Docker image is designed for CI. Many teams regenerate diagrams on every push to keep docs current.

**Q: Does it support custom company icons or branding?**
A: Place SVG icons in your project's icons directory and reference them by filename in the YAML definition.

**Q: What output formats are available?**
A: SVG (default, scalable), PNG (rasterized at configurable DPI), and PDF for print-ready documentation.

**Q: Can I embed the renderer in a web application?**
A: The core library is available as an npm package and can render diagrams in-browser or server-side.

## Sources
- https://github.com/stan-smith/FossFLOW
- https://fossflow.dev/docs

---
Source: https://tokrepo.com/en/workflows/fossflow-beautiful-isometric-infrastructure-diagrams-b741a441
Author: Script Depot