소개

Schematex는 의사, 엔지니어, 변호사가 실제로 사용하는 모든 다이어그램을 렌더링합니다 — 임상 genogram, IEC 61131-3 래더 로직, NSGC pedigree, IEEE 315 단선 다이어그램, cap table 등 다양한 형식을 지원합니다. 간단한 텍스트 DSL을 입력하면 표준을 준수하는 SVG를 출력합니다.

무료. 완전한 오픈소스. AI를 위해 설계됨. AGPL-3.0 라이선스, 런타임 의존성 없음, LLM이 실제로 텍스트를 작성하는 방식을 기반으로 설계된 DSL — ChatGPT나 Claude의 출력을 붙여 넣으면 첫 번째 시도에서 바로 전문적인 다이어그램을 얻을 수 있습니다.

어떤 다이어그램을 그릴 수 있나요?

Schematex draws 49 diagram types across 16 domains — each built to a published standard:

빠른 예제

AI와 함께 사용하기

Schematex는 LLM을 위해 구축된 툴 레이어를 제공합니다. 10초 안에 Claude.ai를 호스팅된 MCP 서버에 연결하면 모든 대화에서 검증된 다이어그램을 생성할 수 있습니다 — 설치나 별도 설정이 필요하지 않습니다.

또는 Vercel AI SDK 위에 자체 AI 기능을 구축할 수도 있습니다. **Schematex를 AI와 함께 사용하기**를 참조하세요.

다음 단계

• 시작하기 — 설치, 가져오기, 렌더링
• Schematex를 AI와 함께 사용하기 — MCP + Vercel AI SDK + 에이전트 루프
• 플레이그라운드 — 모든 다이어그램 유형을 라이브로 시도해보기
• API 참조

작동 방식

각 다이어그램 유형은 동일한 파이프라인을 따릅니다:

Text DSL ──→ Parser ──→ AST ──→ Layout Engine ──→ LayoutResult ──→ SVG Renderer ──→ SVG string

모든 다이어그램은 네 가지 메서드를 가진 DiagramPlugin을 구현합니다:

interface DiagramPlugin {
  detect(text: string): boolean;           // auto-detects diagram type
  parse(text: string): DiagramAST;         // text → typed AST
  layout(ast, config): LayoutResult;       // AST → positioned nodes/edges
  render(layout, config): string;          // LayoutResult → SVG string
}

레이아웃 알고리즘은 설계상 도메인별로 특화되어 있습니다 — genogram은 세대 기반 계층적 레이아웃을, ecomap은 방사형/극좌표를, 로직 게이트는 DAG 위상 정렬을, 래더 로직은 고정 전원 레일 레이아웃을 사용합니다. 일반적인 레이아웃 엔진(dagre, ELK)은 이러한 다이어그램 유형에 대해 표준을 준수하는 출력을 생성할 수 없습니다.

설계 원칙

1. 전문가가 실제로 사용하는 다이어그램 — 각 다이어그램 유형은 공개된 도메인 명세를 구현합니다: McGoldrick 2020 (genogram), Hartman 1978 (ecomap), Bennett 2022 (pedigree), Moreno 1934 (sociogram), IEEE Std 91 (로직 게이트), IEC 61131-3 (래더 로직), IEEE 315 (SLD) 등.
2. 무료 & 완전한 오픈소스 — AGPL-3.0, 런타임 의존성 없음 (D3 없음, dagre 없음, 파서 생성기 없음), 모든 것을 직접 구현. 작은 번들 크기, 공급망 위험 없음. 클로즈드 소스 사용을 위한 상업용 라이선스도 제공됩니다.
3. AI를 위해 설계됨 — DSL은 LLM이 실제로 텍스트를 작성하는 방식을 기반으로 설계되었습니다 (CJK 따옴표, 중첩 모호성, AI가 읽을 수 있는 오류). ChatGPT나 Claude의 출력을 붙여 넣으면 첫 번째 시도에서 바로 전문적인 다이어그램을 얻을 수 있습니다.
4. 시맨틱 SVG 출력 — 모든 SVG에는 접근성을 위한 <title>과 <desc>, 테마 적용을 위한 CSS 클래스, 상호작용을 위한 data-* 속성이 포함됩니다.

테마 설정

세 가지 기본 프리셋: default (블루-그레이), monochrome (흑백 / 인쇄용), dark (Catppuccin Mocha).

각 SVG의 <style> 블록에 주입된 CSS 커스텀 속성으로 어떤 토큰이든 재정의할 수 있습니다:

--schematex-stroke: #1a1a1a;
--schematex-fill: #f5f5f5;