FossFLOW — Beautiful Isometric Infrastructure Diagrams

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