▲

OpenFLOW - 로컬에서 빠르게 아름다운 인프라 다이어그램을 만드는 도구

(github.com/stan-smith)
44P by GN⁺ 6일전 | ★ favorite | 댓글 1개
  • 브라우저 기반으로 작동하는 오픈소스 아이소메트릭(3D 스타일) 다이어그램 제작 PWA
  • React 및 Isoflow 엔진 기반으로, 설치 없이 오프라인에서도 작동하며 개인정보 보호·자동 저장·손쉬운 Import/Export 등 다양한 기능을 제공
  • 로컬 브라우저 저장소에 모든 데이터 저장, 다이어그램을 JSON 파일로 자유롭게 공유·백업 가능
  • GitHub Pages, Netlify 등 정적 호스팅 지원, HTTPS 환경에서 PWA 기능을 완전히 사용할 수 있음

OpenFLOW 개요 및 프로젝트 가치

  • OpenFLOW는 개발자, IT 전문가가 인프라 설계 및 네트워크 구조를 시각화할 때 유용한 무료 오픈소스 PWA(프로그레시브 웹 앱)
  • 경쟁 툴 대비 로컬에서 빠르고 안전하게 작업할 수 있으며, 네트워크 연결 없이도 기능 이용이 가능
  • Isoflow 엔진을 활용해 미려한 3D 스타일 다이어그램 생성이 가능하며, 모든 데이터가 외부 서버로 전송되지 않는 강력한 프라이버시 보장
  • 직관적 UI, 자동 저장, 가져오기/내보내기 등 실무에 편리한 기능 덕분에 다양한 팀과 개인이 네트워크, 아키텍처 문서화를 손쉽게 수행
  • 개발 환경 요구가 낮으며, 특별한 설치 없이 웹브라우저만으로 바로 작업이 가능

주요 기능

  • 아이소메트릭 다이어그램 제작: 3D 느낌의 네트워크, 시스템, 기술 다이어그램 등 시각화
  • 자동 저장: 5초마다 작업 내역이 자동 저장
  • 개인정보 보호: 데이터가 오직 브라우저 로컬에 저장됨 (5~10MB 제한)
  • Import/Export: JSON 파일로 다이어그램 공유 및 백업 지원
  • 오프라인 모드: 인터넷 없이도 모든 기능 사용 가능
  • 빠른 실행: PWA로 설치·실행 가능

배포 및 호스팅

  • 정적 호스팅: build 폴더를 GitHub Pages, Netlify, Vercel, AWS S3 등에 배포
  • HTTPS 필수: PWA 정상 작동을 위해 HTTPS 필요(로컬은 예외)
  • 정기 백업 권장: 중요한 작업은 JSON으로 내보내서 백업

기술 스택

  • React, TypeScript, Isoflow, PWA

호환 브라우저

  • Chrome/Edge (권장), Firefox, Safari, 모바일 PWA 지원

오픈소스 및 기여

  • Isoflow 커뮤니티 에디션(MIT 라이선스) + OpenFLOW(Unlicense)
  • 누구나 자유롭게 사용·수정·배포 가능
▲
GN⁺ 6일전  [-]
Hacker News 의견
  • Mermaid.js는 외형이 마음에 들지 않고, 문법도 어렵고 버그가 많은 편이지만, 정적 사이트 생성기에서 가장 잘 지원되는 다이어그램 툴 중 하나라 사용하고 있는 상황 설명, Isoflow 다이어그램도 Markdown에 이렇게 쉽게 임베드 가능하면 정말 좋겠다는 기대감 표현
    • 재미있는 의견에 감사, TODO 리스트에 추가 예정이라는 계획
    • mermaid 아이디어 자체는 좋지만, 문법이 너무 복잡하고 GitLab 같은 툴과의 통합이 불안정한 문제점 지적
    • Markdown 통합 기능이 있으면 사용자에게 훨씬 큰 이점 제공 의견
  • Isoflow와 Styus를 함께 사용하면 좋겠다는 제안, Stylus는 CSS 클래스를 자동으로 변경하는 경량 홈 상태 서버로, 관련 링크도 공유 https://github.com/mmastrac/stylus, Isoflow 라이브러리와 잘 호환될 것 같다는 기대감
  • Clive Maxfield의 책에 나오는 isometric 다이어그램을 항상 좋아했고, 회로도 중에는 비평면적 구조가 많은데(플립플롭, 반도체 레이어, FPGA 아키텍처 등), 시점 추가로 정보가 덜 복잡해지고 이해 혹은 기억이 쉬워진다는 경험 공유, 다양한 기술 분야에도 잘 맞는 방식이라는 평가 https://www.clivemaxfield.com 링크 첨부
  • 최근 Snowflake에서 Openflow라는 제품을 출시했으니 발견이 어려울 수 있다는 주의, 네이밍에 대한 고민 필요
  • Isoflow 위에 무엇이 얹어진 건지 잘 모르겠다는 질문, Isoflow가 가장 핵심 역할을 하는 것 아니냐는 궁금증
    • 실제로 Isoflow가 작업의 90%를 담당, 숨기는 것 전혀 없고, 커뮤니티팩을 바로 쓸 수 있는 형태가 없어서 직접 제공한 것뿐임을 투명하게 밝힘
  • 특별한 작업 없이 ISOFLOW 커뮤니티 에디션 https://github.com/markmanx/isoflow 을 래핑해서 아주 쉽게 셋업 및 실행 가능하게 만든 점 강조, 다이어그램의 JSON 백업을 내보내고 다시 불러올 수 있어 사실상 무제한 다이어그램 제작이 가능한 편리함 제공, 커뮤니티 버전의 제한을 직접 해소한 이점 안내
    • Node.js에 익숙하지 않은 사용자 질문, Isoflow 코드에서 3D 스타일 아이콘의 그래픽이 어디에 있는지, SVG 파일인지, 커스텀 아이콘 추가 가능성에 대한 궁금증 제시
  • 다이어그램 퀄리티에 칭찬, 과거 비슷한 프로젝트가 수익화에서 어려움을 겪고 종료된 경험 회상, 이 프로젝트는 MIT OSS라 현재로선 수익화가 주요 목표가 아닌 느낌, 하단의 "Built with the Isoflow library" 링크가 404 에러임도 발견 및 안내 https://github.com/isoflow/isoflow
    • 디자인이나 아이콘 관련 공로는 거의 전부 Isoflow에 있고, 커뮤니티 에디션이 Pro 버전으로의 업셀을 유도한다는 구조 설명, 수익화 계획 전혀 없고 사람들이 즐겁게 사용하길 바라는 마음, 잘못된 링크 지적에 바로 반영할 예정
  • GitHub pages에도 호스팅 될 수 있는지와 데모 링크 문의
  • 재미있는 앱이라는 평가와 상세 정보 공유에 대한 긍정적 피드백
답변달기