웹에서 뚝딱 인프라 3D 다이어그램 Isoflow 기반 오픈소스 OpenFLOW

(GitHub) FossFLOW - Isometric Diagramming Tool

— 로컬에서 작동하는 아름답고 실용적인 인프라 다이어그램 툴

OpenFLOW는 React 기반의 PWA (Progressive Web App)로, 설치 없이 웹브라우저에서 오프라인으로도 작동하며 아이소메트릭(3D 스타일) 인프라 다이어그램을 빠르고 쉽게 만들 수 있는 오픈소스 도구입니다. 이 툴은 Isoflow 커뮤니티 에디션을 래핑하여 제작되었으며, 사용자는 웹 환경에서 빠르게 네트워크 구조, 클라우드 아키텍처, 시스템 구성 등을 시각화할 수 있습니다.

핵심 특징 요약

항목	설명
동작 환경	브라우저 기반 / 오프라인 지원 / 설치 불필요
데이터 저장	브라우저 로컬스토리지 (5~10MB 제한)
시각화 스타일	Isoflow 기반 3D Isometric
데이터 포맷	JSON 파일로 내보내기 및 가져오기
배포 형태	정적 호스팅 가능 (GitHub Pages, Netlify 등)
기술 스택	React, TypeScript, Isoflow, PWA
오픈소스 라이선스	MIT + Unlicense (자유로운 사용/수정/배포)

주요 기능 자세히 보기

🎨 Isometric 3D 다이어그램 제작

• Isoflow 엔진을 사용해 깔끔하고 직관적인 3D 스타일 시각화 제공
• 네트워크, 서버, 클라우드, 앱 구조 등 기술 아키텍처에 최적

💾 자동 저장

• 5초 간격으로 로컬 브라우저에 자동 저장됨
• 실수로 닫아도 복구 가능

🔐 개인정보 보호

• 모든 데이터가 브라우저 로컬스토리지에만 저장됨
• 인터넷 연결 없이도 완전한 오프라인 작동

🔄 가져오기 / 내보내기

• .json 파일 포맷으로 다이어그램 백업 및 공유
• 다른 사용자와 협업 가능

🚀 오프라인 실행

• 브라우저만 있으면 인터넷 없이도 사용 가능
• PWA 기능으로 설치처럼 실행 가능

300x250

배포 및 실행 방법

▶️ 바로 사용

1. GitHub 저장소 방문: https://github.com/stan-smith/FossFLOW
2. Demo 링크 통해 웹 앱 접속
3. ‘+’ 버튼으로 새 다이어그램 시작

🖥 로컬 실행 (선택사항)

git clone https://github.com/stan-smith/FossFLOW.git
cd FossFLOW
npm install
npm run dev

🌐 정적 배포

1. npm run build로 정적 파일 생성
2. /dist 또는 /build 폴더를 GitHub Pages, Netlify, S3 등에 배포
3. HTTPS 환경이면 PWA로 설치도 가능

📦 dist/index.html만으로 배포가 가능하므로 S3나 NGINX에도 손쉽게 탑재 가능

활용 사례

분야	사용 예시
DevOps	인프라 아키텍처 설계, 배포 다이어그램
보안팀	네트워크 분리 구조 시각화, DMZ 구성도
교육	시스템 구조 설명용 자료, 수업용 교재 다이어그램
기획/PM	시스템 흐름 문서화, 제안서용 시각 자료
개발자 블로그	문서에 첨부할 시각적 시스템 개요

Isoflow와의 관계 및 기술 요소

🔹 Isoflow 커뮤니티 에디션 기반

• Isoflow는 자체적으로 3D 아이콘 세트와 캔버스 UI를 제공
• OpenFLOW는 이를 간편하게 래핑하여 배포, 누구나 쉽게 사용 가능

🔹 커스텀 아이콘은?

• Isoflow 내부의 아이콘은 SVG 기반
• 현재 직접 아이콘을 추가하는 기능은 제공되지 않지만, Fork 후 수정 가능

🔹 PWA의 장점

• 모바일에서도 설치 가능
• 오프라인에서도 완벽 작동
• 로컬스토리지 기반이라 보안 우수

Markdown, Mermaid 대안으로서의 가능성

• Mermaid.js에 비해
  • UI 기반이라 배우기 쉽고, 시각적으로 매우 우수
  • Markdown 내 직접 삽입은 아직 불가능하나, 추후 임베드 기능 기대됨
• 사용자 의견 적극 수용 중, TODO로 향후 Markdown 임베드, Stylus 통합 등 고려 중

관련 링크 및 참고 자료

• 🔗 OpenFLOW GitHub: https://github.com/stan-smith/FossFLOW
• 🧱 Isoflow 원본: https://github.com/markmanx/isoflow
• 📚 Clive Maxfield의 아이소메트릭 설명: https://www.clivemaxfield.com
• 📄 Stylus 프로젝트: https://github.com/mmastrac/stylus

 

OpenFLOW는 오프라인 작동, 아름다운 디자인, 높은 프라이버시 보호를 모두 제공하는 탁월한 도구입니다. 별도 설치 없이, 클릭 몇 번만으로 전문적인 인프라 다이어그램을 그릴 수 있으며, GitHub Pages 등으로 쉽게 배포도 가능합니다. 기술적 배경 없이도 누구나 사용할 수 있는 쉬운 인터페이스가 가장 큰 강점이며, 오픈소스이기에 커스터마이징도 자유롭습니다.