본문으로 이동

ThinkFlow 사용 안내

텍스트 원본을 그림으로 만들고, 움직임을 더하고, 문서에 넣는 방법을 안내합니다. 문서는 한국어입니다. 처음 쓰는 사람은 시작하기를 따라 하고, 이미 만든 그림을 바꾸려면 작업별 안내에서 필요한 표현을 고릅니다.

시작하기

  1. 설치와 버전 확인으로 실행 환경을 준비합니다.
  2. 첫 그림 만들기로 SVG와 HTML을 만듭니다.
  3. 읽는 화면의 동작으로 탭·복사·다운로드·전체화면을 익힙니다.
  4. Markdown과 홈페이지에 넣기로 본문에 그림을 넣습니다.
문서 내용
ThinkFlow 사용법 설치, 기본 작성, 장면과 트래픽, 표현 선택, Markdown과 홈페이지 삽입, CLI, API, 문제 해결

만들려는 그림 고르기

각 레퍼런스에는 최소 원본, 적용할 문법, 장면과 움직임, 흔한 오류가 있습니다. 그림의 이름보다 설명하려는 내용을 기준으로 고릅니다.

문서 내용
구조 그림 레퍼런스 구조 그림의 최소 예제, 장면과 움직임, 흔한 오류
구성도 레퍼런스 그룹, 아이콘, 번호 선을 쓴 구성도의 최소 예제와 흔한 오류
순서 그림 레퍼런스 순서 보기의 최소 예제, 구획, 흔한 오류
상태 그림 레퍼런스 상태 카드의 최소 예제, 장면과 움직임, 흔한 오류
데이터 관계 그림 레퍼런스 테이블 카드의 최소 예제, 장면과 움직임, 흔한 오류
칸 격자 레퍼런스 칸 격자의 최소 예제, 장면과 움직임, 흔한 오류
차트 레퍼런스 차트 열여섯 종류의 표, 계열 규칙, 최소 예제, 흔한 오류

API의 요청·응답 칸은 API 계약, 객체의 상속·구현은 클래스와 인터페이스, 실제 소요 시간은 추적과 여러 보기에서 시작합니다. 카드 안 설명·값·작은 차트는 카드 본문을 확인합니다.

예제 원본에는 표현마다 실행 가능한 예제가 있습니다. 저장소에서 npm ci 뒤 npm run catalog를 실행하면 원본·미리보기·HTML·SVG를 모은 갤러리가 만들어집니다. npm 소비자 프로젝트에서는 gallery 명령으로 자신의 원본 폴더를 처리합니다.

움직임과 문서 연동

문법과 문제 해결

문제가 있을 때에서 증상별 확인 순서를 찾습니다. 옵션 이름과 기본값이 필요하면 그림 문법, 진단의 의미가 필요하면 그림 검사를 읽습니다.

문서 내용
그림 문법 thinkflow 원본의 줄과 글자 규칙, 파일 구조, 카드, 보기, 장면, 값, 오류, 문법 표
그림 검사 화면 오류 검사 항목과 메시지
표현 범위와 검증 범위 지원 표현과 문법, 예제, 시험의 대응표, 전용 표현이 없는 범위, 승인한 제외와 보류
용어 이 프로젝트에서만 쓰는 말

구현과 기여

아래 문서는 ThinkFlow 자체를 고치는 사람을 위한 설계입니다. 사용 중인 명령의 상세 계약을 확인할 때도 참고할 수 있습니다. 진행 기록과 검수 결과는 GitHub 이슈에서 관리합니다.

문서 내용
아키텍처 구성 요소, 실행 흐름, 불변 조건
카드와 보기 순서 보기, 상태, 스키마, 클래스 카드의 선언과 장면 규칙, 카드와 보기 사이 규칙
칸 격자 칸 단위 카드의 문법, 크기, 칸 밝히기, 칸 단위 선
차트 차트 카드, 값 출처, 계열 드러내기, 그리기
배치 글 재기, 도형 크기와 연결점, 그룹 배치, 그림 비율
재생 장면의 정지·한 번·반복, 논리 시각과 표시 길이, 시간표 규칙(시간 상한과 정밀도, 이벤트, 조건과 대기, 예약), HTML 재생기(탭, 도구 막대, 전체 화면, 반응형, 내려받기), 움직이는 SVG와 멈춘 SVG, 결과 파일
마크다운과 배포 md 명령, GitHub Action, 배포 워크플로, 패키지
문서 스킬 연동 문서 스킬의 D2와 Vega-Lite를 대신하는 계약, 디자인 기준·색 계약·수용 게이트와 증거 표
결정 기록 설계를 정한 이유와 버린 선택지

공개 원문