lukilabs/beautiful-mermaid

외부 오픈소스 저장소를 소개하는 글입니다. HDATF 제품이 아닙니다.

무엇을 하나

beautiful-mermaid는 Mermaid 다이어그램을 테마를 바꿀 수 있는 SVG나 터미널용 ASCII, Unicode 텍스트로 그려 주는 TypeScript 라이브러리로, DOM에 의존하지 않습니다. 플로차트, 상태, 시퀀스, 클래스, ER, XY 차트 다이어그램을 지원합니다.

ATF에 주는 도움

ATF Works wiki와 문서에서 Mermaid 다이어그램을 보여 줄 때 참고할 수 있습니다. 터미널에서 agent 작업을 볼 때는 텍스트 출력 방식도 비교해 볼 만합니다.

라이선스

MIT 허용 범위가 넓습니다. 저작권 표시를 유지하면 상업적 이용과 수정이 가능합니다.

같은 분야 저장소

• bwya77/vscode-dark-islands
  VS Code와 VSCodium 같은 호환 에디터용 다크 컬러 테마입니다. 떠 있는 유리 느낌의 패널, 둥근 모서리, 알약 모양의 activity bar와 스크롤바, 따뜻한 색감의 syntax highlighting을 제공합니다.
• ChartGPU/ChartGPU
  WebGPU로 그리는 TypeScript 차트 라이브러리입니다. 점이 많은 시계열, 스트리밍 업데이트, 여러 차트를 모은 대시보드, 3D 시리즈를 대상으로 합니다. WebGL이나 Canvas 대체 경로가 없어서 지원하지 않는 브라우저는 앱이 따로 처리해야 합니다.
• chenglou/pretext
  여러 줄 텍스트의 크기를 재고 배치를 계산하는 JavaScript, TypeScript 라이브러리입니다. 자체 계산을 쓰기 때문에 layout reflow를 일으키는 DOM 측정을 피할 수 있습니다. 결과는 DOM, Canvas, SVG로 그릴 수 있습니다.
• tambo-ai/tambo
  Tambo는 UI를 그려 주는 agent를 만드는 React 툴킷입니다. 개발자가 Zod schema로 컴포넌트를 등록하면 agent가 알맞은 컴포넌트를 골라 props를 스트리밍합니다. 대화 상태와 agent loop는 호스팅 또는 self-hosted 백엔드가 맡습니다.
• VoltAgent/awesome-design-md
  잘 알려진 웹사이트의 디자인 토큰, 패턴, 규칙을 정리한 markdown 문서인 DESIGN.md 파일 모음입니다. 프로젝트에 넣어 두면 AI coding agent가 그 디자인 언어를 따르는 UI를 만들 수 있습니다.

Trendshift 순위 목록에 오른 저장소만 담았고, 목록은 후보를 찾는 데만 썼습니다. 순위 숫자는 옮기지 않았습니다. 설명과 라이선스, 별 수는 각 GitHub 저장소에서 확인했습니다. 해설은 우리의 판단입니다. 이 프로젝트들을 직접 시험한 것은 아니며, 상승 목록에 올랐다고 품질이 증명되지는 않습니다.