plait-board/drawnix

<p align="center"> <picture style="width: 320px"> <source media="(prefers-color-scheme: light)" srcset="https://github.com/plait-board/drawnix/blob/develop/apps/web/public/logo/logodrawnixh.svg?raw=true" /> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/plait-board/drawnix/blob/develop/apps/web/public/logo/logodrawnixhdark.svg?raw=true" /> <img src="https://github.com/plait-board/drawnix/blob/develop/apps/web/public/logo/logodrawnix_h.svg?raw=true" width="360" alt="Drawnix 로고 및 이름" /> </picture> </p> <div align="center"> <h2> 오픈소스 화이트보드 도구(SaaS), 올인원 화이트보드, 마인드맵, 순서도, 자유 드로잉 등 포함 <br /> </h2> </div>

<div align="center"> <figure> <a target="blank" rel="noopener"> <img src="https://github.com/plait-board/drawnix/blob/develop/apps/web/public/productshowcase/case-2.png" alt="제품 쇼케이스" width="80%" /> </a> <figcaption> <p align="center"> 올인원 화이트보드, 마인드맵, 순서도, 자유 드로잉 등 </p> </figcaption> </figure> <a href="https://hellogithub.com/repository/plait-board/drawnix" target="blank"> <picture style="width: 250"> <source media="(prefers-color-scheme: light)" srcset="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=4dcea807fab7468a962c153b07ae4e4e&claimuid=zmFSY5k8EuZri43&theme=neutral" /> <source media="(prefers-color-scheme: dark)" srcset="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=4dcea807fab7468a962c153b07ae4e4e&claimuid=zmFSY5k8EuZri43&theme=dark" /> <img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=4dcea807fab7468a962c153b07ae4e4e&claimuid=zmFSY5k8EuZri43&theme=neutral" alt="Featured｜HelloGitHub" style="width: 250px; height: 54px;" width="250" height="54"/> </picture> </a>

<br />

<a href="https://trendshift.io/repositories/13979" target="_blank"><img src="https://trendshift.io/api/badge/repositories/13979" alt="plait-board%2Fdrawnix | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a> </div>

English README

기능

• 💯 무료 + 오픈소스
• ⚒️ 마인드맵, 순서도
• 🖌 펜 그리기
• 😀 이미지 삽입
• 🚀 플러그인 기반
• 🖼️ 📃 PNG, JSON(.drawnix)으로 내보내기
• 💾 자동 저장 (브라우저 캐시)
• ⚡ 편집 기능: 실행 취소, 다시 실행, 복사, 붙여넣기 등
• 🌌 무한 캔버스: 확대/축소, 스크롤
• 🎨 테마 모드
• 📱 모바일 기기 지원
• 📈 Mermaid 문법을 순서도로 변환 지원
• ✨ Markdown 텍스트를 마인드맵으로 변환 지원 (신규 지원 🔥🔥🔥)

이름에 관하여

Drawnix는 그림(Draw)과 불사조(Phoenix)의 영감이 교차하여 탄생했습니다.

불사조는 끊임없는 창의성을 상징하며, Draw는 인간의 가장 원초적인 표현 방식을 나타냅니다. 여기서 모든 창작은 예술의 재탄생이며, 모든 그림은 영감의 부활입니다.

창의성은 불사조와 같아서, 불길 속에서야 다시 태어날 수 있으며, Drawnix는 기술과 창의성의 불꽃을 지키는 수호자가 되고자 합니다.

Draw Beyond, Rise Above.

Plait 그림 프레임워크와의 관계

Drawnix는 즉시 사용 가능한 오픈소스 무료 도구 제품으로, 그 기반은 Plait 프레임워크입니다. Plait는 저희 회사가 오픈소스로 공개한 그림 프레임워크로, 회사의 지식베이스 제품(PingCode Wiki)에서 중요한 기술적 축적을 나타냅니다.

Drawnix는 플러그인 아키텍처를 사용하며, 앞서 언급한 오픈소스 도구보다 기술 아키텍처가 더 복잡하지만, 플러그인 아키텍처는 여러 UI 프레임워크(Angular, React)를 지원하고, 다양한 리치 텍스트 프레임워크(현재는 Slate 프레임워크만 지원)를 통합할 수 있으며, 개발 시 비즈니스 계층을 잘 분리하고 다양한 세분화된 재사용 가능 플러그인을 개발하여 더 많은 화이트보드 응용 시나리오를 확장할 수 있는 장점이 있습니다.

저장소 구조

drawnix/
├── apps/
│   ├── web                   # drawnix.com
│   │    └── index.html       # HTML
├── dist/                     # 빌드 결과물
├── packages/
│   └── drawnix/              # 화이트보드 애플리케이션
│   └── react-board/          # 화이트보드 React 뷰 레이어
│   └── react-text/           # 텍스트 렌더링 모듈
├── package.json
├──...
└── README.md
└── README_en.md

애플리케이션

https://drawnix.com은 drawnix의 최소화된 애플리케이션입니다.

최근에는 Dawn(새벽) 버전이 출시될 때까지 drawnix.com을 자주 업데이트할 예정입니다.

개발

npm install

npm run start

Docker

docker pull pubuzhixing/drawnix:latest

의존성

• plait - 오픈소스 그림 프레임워크
• slate - 리치 텍스트 편집기 프레임워크
• floating-ui - 팝업 레이어를 만드는 데 매우 유용한 기본 라이브러리

기여

모든 형태의 기여를 환영합니다:

• 버그 제보
• 코드 기여

감사의 말

특별히 회사의 오픈소스 프로젝트에 대한 전폭적인 지원과, 이 프로젝트에 코드를 기여하고 제안을 제공한 모든 분들께 감사드립니다.

<p align="left"> <a href="https://pingcode.com?utmsource=drawnix" target="blank"> <img src="https://cdn-aliyun.pingcode.com/static/site/img/pingcode-logo.4267e7b.svg" width="120" alt="PingCode" /> </a> </p>

라이선스

MIT License