728x90
— 로컬에서 작동하는 아름답고 실용적인 인프라 다이어그램 툴
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
배포 및 실행 방법
▶️ 바로 사용
- GitHub 저장소 방문: https://github.com/stan-smith/FossFLOW
- Demo 링크 통해 웹 앱 접속
- ‘+’ 버튼으로 새 다이어그램 시작
🖥 로컬 실행 (선택사항)
git clone https://github.com/stan-smith/FossFLOW.git
cd FossFLOW
npm install
npm run dev
🌐 정적 배포
npm run build
로 정적 파일 생성/dist
또는/build
폴더를 GitHub Pages, Netlify, S3 등에 배포- 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 등으로 쉽게 배포도 가능합니다. 기술적 배경 없이도 누구나 사용할 수 있는 쉬운 인터페이스가 가장 큰 강점이며, 오픈소스이기에 커스터마이징도 자유롭습니다.
728x90
그리드형(광고전용)
댓글