01 — THEME WITHOUT A REDRAW
A change of atmosphere.
CSS 변수만 바꾸면 모든 다이어그램이 새 옷을 입습니다.
A SMALL LIBRARY. A BIG SPARK.
Ideas, set
in motion.
텍스트 한 줄에서, 생각의 지도로.
가볍고 빠른 Pele의 모든 가능성을 직접 그려보세요.
Mermaid syntax. Pele magic.
FIG. 001 — AN IDEA TAKING SHAPE LIVE SVG
Made of text.
Ready for anything.
++++Ready for anything.
—ms to make a little magic
33types
모든 생각에 맞는 다이어그램
0dependencies
가벼운 라이브러리, 순수한 가능성
100% SVG
확대해도 선명하게
CSSthemed
색을 바꿔도 다시 그릴 필요 없이
01 / MAKE SOMETHING
Your next idea
starts here.
왼쪽의 코드를 바꿔보세요.
오른쪽에서 생각이 바로 모습을 갖춥니다.
Tab 들여쓰기 · 입력 즉시 렌더링0 chars
Pele를 준비하고 있습니다…
PALETTE
↳ 640px 아래에서는 지원되는 다이어그램이 세로로 재배치됩니다.휠 + Ctrl/⌘로 확대 · 드래그로 이동 · 브라우저에서 렌더링
02 / THE POSSIBILITIES
One language.
33 ways to see it.
구조를 설계하고, 데이터를 읽고, 이야기를 펼치세요.
카드를 고르면 플레이그라운드에서 바로 열립니다.
일치하는 다이어그램이 없습니다. 다른 단어로 찾아보세요.
33종 · 예제 138개 · Pele 1.6.0으로 렌더링 검증
03 / UNDER THE SURFACE
A little library.
A lot to play with.
색을 바꾸고, 속도를 재고, 내부를 살펴보세요.
작은 디테일까지 직접 만져볼 수 있도록.
02 — MEASURE, DON'T GUESS
Fast feels different.
현재 코드로 100번 렌더링한 실제 평균 시간입니다.
—ms / render
현재 기기에서 직접 측정해보세요.
파싱 + 레이아웃 + SVG 생성 · DOM 삽입 제외
기기와 다이어그램 복잡도에 따라 결과가 달라집니다.
detectType() —supports() —SVG·Model 탭에서 렌더 결과와 parse() 모델도 확인하세요. 오류가 나면 마지막 유효한 그림이 유지됩니다.
A SPARK IS ALL IT TAKES.