TikZ Editor: LaTeX 그림용 WYSIWYG 편집기

 (tikz.dev)
1P by GN⁺ | ★ favorite | 댓글 1개
  • TikZ Editor v0.4.0은 LaTeX의 TikZ 다이어그램을 직접 조작해 편집하는 무료 MIT 라이선스 오픈소스 앱으로, 웹과 데스크톱에서 사용할 수 있음
  • 기존 TikZ 그림이나 전체 .tex 논문 파일을 열어 요소를 드래그하면 TikZ 코드가 즉시 갱신되고, 줄바꿈·공백 같은 기존 서식은 유지됨
  • 노드, 경로, 화살표, 도형, 행렬, \foreach 루프, 라벨, 핀, 엣지 라벨 등 자주 쓰는 TikZ 구성요소를 시각적으로 편집할 수 있음
  • 소스 편집기는 구문 강조, 접기, 자동완성, 검색, 진단, 인라인 색상 스와치, 색상 선택기와 숫자 스크러빙을 제공하며 TeX 컴파일러 없이 오류를 분석함
  • TypeScript와 Tauri 기반으로 구현됐고, TikZ 코드 전체를 다시 쓰지 않고 작은 패치만 적용해 사용자의 들여쓰기와 줄바꿈을 보존함

TikZ 그림을 직접 조작하는 편집기

  • TikZ Editor v0.4.0은 LaTeX용 TikZ 다이어그램을 위한 WYSIWYG 편집기임
  • 새 그림을 처음부터 만들거나 기존 TikZ 그림을 편집할 수 있으며, 전체 논문 .tex 파일을 열어 그 안의 이미지를 수정할 수 있음
  • 요소를 이동하면 TikZ 코드가 즉시 갱신되고, 기존 코드의 줄바꿈과 공백 같은 서식은 흐트러지지 않음
  • 위치를 미세 조정할 때 다시 컴파일하지 않아도 결과를 바로 확인할 수 있음
  • 앱은 무료 MIT 라이선스 오픈소스로 공개되어 있고, 코드는 GitHub에 있음
  • 웹에서 사용할 수 있으며, 일부 추가 기능을 포함한 가벼운 데스크톱 앱도 제공됨

시각 편집과 TikZ 코드의 동기화

  • 좌표를 직접 고치는 대신 경로와 노드를 원하는 위치로 드래그하면 코드가 바로 업데이트됨
  • 새 요소 추가 도구로 다음 항목을 삽입할 수 있음
    • 선, 화살표, 여러 구간으로 된 경로
    • 노드, 사각형, 원
  • 새 요소는 코드 끝에 삽입되며, 추가한 뒤 바로 이동하거나 크기를 조정할 수 있음
  • 둥근 모서리와 경로 조인에는 rounded corners를 적용할 수 있고, rounded corners=2pt처럼 값과 함께 사용할 수 있음

TikZ에 맞춘 소스 편집기

  • 소스 패널은 현재 소스를 항상 표시하고 TikZ 구문 강조를 제공함
  • 스코프의 세부 내용을 숨기는 코드 접기를 지원함
  • 마우스를 올리면 TikZ 매뉴얼의 관련 스니펫을 볼 수 있음
  • 오류는 무엇이 잘못됐는지 알 수 있도록 설명과 함께 강조됨
    • 앱이 TeX 컴파일러 없이 코드를 이해하기 때문에 가능한 기능임
  • 소스 뷰에서 직접 입력하지 않아도 색상과 숫자를 조정할 수 있음
    • 색상 선택기 지원
    • 숫자 스크러빙 지원

정렬, 그룹화, 다중 그림 편집

  • 스냅 기능으로 요소를 세로·가로로 맞추거나 동일 간격으로 배치할 수 있음
  • 자, 사용자 지정 가이드라인, 확대/축소, 돋보기 도구를 제공함
  • 여러 객체를 선택해 그룹화할 수 있고, 그룹화는 TikZ 스코프로 구현됨
  • 다중 선택 상태에서는 정렬과 분배 같은 레이아웃 작업이 가능함
  • 전체 .tex 논문 파일을 열면 앱 하단의 그림 미리보기로 여러 tikzpicture 환경 사이를 전환할 수 있음
  • 앱은 사용자의 많은 커스텀 매크로를 이해함

지원하는 TikZ 기능과 도구

  • 앱은 관용적인 TikZ 그림을 만들 수 있도록 설계됨
  • 경로는 노드 앵커에 붙도록 쉽게 그릴 수 있음
  • 노드 라벨, 핀, 엣지 라벨 편집을 지원함
  • 제공 도구는 다음과 같음
    • Select: 객체 이동, 크기 조정, 회전, 경로 편집, 다중 선택 편집
    • Magnify: TeXstudio와 유사한 가상 돋보기
    • Node: TikZ \node로 텍스트 추가
    • Shape: shape 라이브러리 기반 노드 추가, 다이아몬드·다각형·별·구름·화살표 등 지원
    • Matrix: 행과 열 수를 지정해 노드 행렬 삽입
    • Line, Arrow, Bezier, Path, Freehand: 직선, 화살표, 곡선, 다중 구간 경로, 스무딩된 자유곡선 생성
    • Grid, Rectangle, Ellipse, Circle: 격자와 기본 도형 경로 생성
    • Bucket: 기존 닫힌 영역에 채우기 색 적용

파일, 내보내기, 패널 기능

  • 파일과 내보내기 기능은 다음을 포함함
    • .tex와 .tikz 파일 열기 및 편집
    • SVG, Ipe .ipe, PowerPoint .pptx에서 그림 가져오기
    • SVG, PNG, PDF, 독립 실행 LaTeX로 내보내기
    • 탭으로 여러 문서를 동시에 작업
  • 논문과 그림 편집 기능은 다음을 포함함
    • 여러 그림이 있는 전체 논문 열기
    • 썸네일 미리보기로 그림 사이 이동
    • 노드, 도형, 행렬, 화살표, 경로, 곡선, 격자, 사각형, 타원, 원 그리기
    • 그림 안의 텍스트와 수식 직접 편집
  • 직접 편집 기능은 다음을 포함함
    • 이동, 크기 조정, 회전, 복제, 그룹화, 정렬, 분배, 뒤집기, 순서 변경
    • 포인트 핸들로 경로 편집
    • 분할·결합, 반전, 열기·닫기, 모서리, 부드러운 포인트 명령
    • 격자, 가이드, 객체 포인트, 객체 간격에 스냅
  • 패널 기능은 다음을 포함함
    • Inspector에서 선, 채우기, 화살표, 텍스트, 변환, 도형, 스타일 편집
    • Objects 패널에서 객체 표시 여부, 그룹, 이름 변경, 레이어 순서 관리
    • Styles 패널에서 브라우저 개발자 도구의 CSS 편집과 비슷하게 TikZ 스타일 편집

루프, 구조, AI 보조

  • Repeat 대화상자로 선택 영역을 여러 행과 열로 복사하는 \foreach 루프를 추가할 수 있음
  • 이미 \foreach를 사용하는 그림도 열고 편집할 수 있으며, 중첩 루프도 포함됨
  • 트리 다이어그램은 자식 추가 방식으로 편집할 수 있음
  • 행렬은 행·열 명령과 전치 명령으로 수정 가능함
  • 데스크톱 버전에서 OpenAI Codex가 설치되어 있으면 앱 안에서 그림 편집을 요청할 수 있음
    • 어시스턴트는 TikZ 전용 도구 여러 개에 접근함
    • 사용량은 사용자의 ChatGPT 계정에서 차감됨
    • 이미지 첨부를 포함한 편집 도움도 지원함

내부 구현 방식

  • 앱은 TypeScript로 작성됨
  • 데스크톱 버전은 Tauri를 사용하며, 가벼운 Rust 백엔드를 포함함
  • 초기 코드베이스는 Codex가 3개월 동안 작성했고, 사용된 모델은 gpt-5-3-codex, gpt-5-4, gpt-5-4-mini, gpt-5-5임
  • Claude의 일부 기여도 포함됨
  • TeX 코드 파싱은 매우 어렵지만, TikZ Editor는 임의의 TeX 전체가 아니라 TikZ 그림 제작에 자주 쓰이는 명령만 파싱함
    • 매우 “hacky”한 코드는 올바르게 해석되지 않을 가능성이 있음
    • 지원 범위는 꽤 좋고 시간이 지나며 늘어나고 있음
  • 앱은 TikZ 코드를 파싱해 내부 표현을 만들고, 이 표현으로 좌표, 스타일, 변환, 루프, 노드, 경로, 텍스트를 편집 가능한 장면 요소로 해석함
  • 내부 표현은 줄과 문자 범위 태그로 구문 입력과 밀접하게 연결됨
  • 코드 전체를 표준 형식으로 다시 쓰지 않고 작은 패치로 일부만 바꾸기 때문에 사용자의 들여쓰기와 줄바꿈을 충실히 보존할 수 있음
  • 장면은 SVG로 렌더링됨

렌더링과 변환기

  • 텍스트와 수식 렌더링은 MathJax로 처리됨
  • 여러 줄 텍스트를 지원하기 위해 TeX의 하이픈 처리 알고리듬과 Knuth-Plass 줄바꿈 알고리듬을 다시 구현함
  • 이 구현 덕분에 앱에서 보이는 여러 줄 텍스트는 일반적으로 TeX가 같은 텍스트를 렌더링하는 방식과 정확히 일치함
  • 커스텀 색상 선택기는 RGB 색상을 짧은 xcolor 문자열로 표현 가능한 가장 가까운 색으로 변환함
    • 예: #409a40은 violet!88!white!45!green으로 변환됨
    • 관련 코드는 npm 패키지 xcolor-rgb-convert로 제공됨
  • 다양한 파일 형식 가져오기는 별도 개발된 변환기를 기반으로 함
  • 데스크톱 앱은 PowerPoint와 Keynote에서 객체를 직접 붙여넣을 수 있음
    • Keynote 붙여넣기는 keynote 클립보드 형식 인터프리터를 사용하며, keynote-clipboard npm 패키지로 제공됨
  • 데스크톱 앱의 AI 지원은 Codex App Server를 통해 제공됨
  • 소스 편집기는 CodeMirror 위에 구축됨

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 조금 써봤는데, UI가 아주 멋지고 프로젝트 자체도 좋음. 축하함
    다만 생성되는 TikZ 코드는 별로라고 봄. 모든 것이 절대좌표를 쓰는데, TikZ에서는 그럴 필요가 거의 없음
    예를 들어 노드 하나만 놓아도 절대좌표가 생기는데, \node {Hello};라고만 쓰면 TikZ가 경계 상자 중앙에 배치함. 테스트처럼 (0.5,2.91)에 있다고 지정할 필요가 없음
    여러 노드를 선택해서 “아래 정렬” 같은 기능을 쓸 때도 절대좌표를 조작하기보다 TikZ의 정렬 기능, 즉 앵커 등을 활용해야 한다고 봄. 이런 코드 생성이 더 어렵다는 건 이해하지만, 다음 버전에서 고려할 만한 방향일 수 있음

    • 좋은 피드백임. 어려운 부분은 코드 생성 자체보다 사용자가 기대하는 동작을 판단하는 데 있다고 봄
      “아래 정렬” 버튼을 눌렀을 때
      \begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}
      같은 코드가 갑자기 임의 이름의 \coordinate와 상대좌표 표기로 바뀌면 놀랄 것 같음
      반대로 처음부터 “예쁜” 코드로 시작하면, 앱은 많은 경우 드래그를 허용하지 못함. 드래그가 무엇을 의미하는지 알 수 없거나, 실제로 알 수 없는 경우가 많기 때문임. 이름 붙은 좌표를 바꾸는 건지, 그 좌표에 대한 오프셋을 바꾸는 건지 같은 문제가 생김
      이 논의의 다른 곳에서 “right of” 같은 배치 방식도 이야기했고, 좋은 제안들이 나왔음: https://news.ycombinator.com/item?id=48647683
    • 그런 기능은 CAD 스크립트 언어들이 어떻게 하는지 참고할 수 있을 것 같음

  • 궁금한 사람이 있을까 봐 쓰면, 이 프로젝트는 2026년 2월부터 비교적 꾸준히 작업해 옴
    그동안 Codex를 통해 이 프로젝트에 약 7억 토큰을 썼고, 캐시 읽기는 제외한 수치임. API 요금으로는 1만 5천 달러 정도였겠지만, 실제로는 ChatGPT 구독료로 약 500달러만 냈음

  • CircuitiTikZ를 정말 좋아함. 간단한 텍스트 기반 회로도를 그리는 유일한 방법에 가까움
    https://ctan.org/pkg/circuitikz?lang=en
    https://github.com/circuitikz/circuitikz
    몇 년 전 asciidoctor-diagram과 연결해서 Asciidoc 유지보수 매뉴얼에 간단한 회로를 넣을 수 있게 했음. 현장 기술자들이 정말 좋아했고, PDM/ERP가 던져주는 지옥 같은 도구 대신 Git 버전 관리 생태계 안에서 협업할 수 있었음
    이미 훌륭한 WireViz의 아주 좋은 보완재이기도 함: https://github.com/wireviz/WireViz

  • 멋짐. https://q.uiver.app/도 좋았는데, https://github.com/varkor가 만든 좀 더 특화된 도구임

  • 아주 멋지지만, 결국 나올 수밖에 없는 질문을 해보자면 cetz 지원은 얼마나 어려울까?
    피할 수 있다면 LaTeX는 안 건드리고 싶고, Typst는 항상 쓰고 있음

    • 코딩 에이전트를 쓰면 꽤 가능할 것 같음
      Typst 기반의 완전한 위지윅, 이른바 바이브 코딩으로 만든 발표 소프트웨어가 이미 있고, 그중 일부가 정확히 그런 기능을 구현함
      https://codeberg.org/presenst/presenst

  • 학생 때 이런 걸 정말 원했음. 오픈소스로 만들어줘서 고마움
    내 이론 컴퓨터과학 교수님이 우연히 TikZ를 만든 Till Tantau였음. 설명도 정말 잘하는 분이었음

    • Schleswig-Holstein 사람들은 어디에나 있음 :) Till Tantau는 LaTeX 발표 자료를 만드는 beamer 패키지도 시작했음
      beamer와 TikZ는 둘 다 과학 커뮤니케이션에 매우 중요한 기여임

  • 멋짐
    사람들이 좋아하는 건 알지만, TikZ를 직접 쓰는 건 정말 싫어서 기술적인 그림 대부분을 draw.io/diagrams.net으로 옮기고 PNG로 내보내고 있음. 세련되진 않지만 충분히 잘 작동하고, 보기 괜찮은 결과물을 쉽게 만들 수 있음. 원래는 텍스트로 정의되는 것들을 대체로 선호함
    Markdown 안에 남을 그림이면 일부는 Mermaid로 옮겼지만, TeX에서 동작하게 해보진 않았음
    그래도 LaTeX에서 다이어그램을 그리는 관용적인 방식이 TikZ에 가깝기 때문에, 위지윅 편집기가 있으면 유용할 것 같음
    제안 하나를 하자면, 화살표가 박스에 “붙을” 수 있으면 좋겠음. 박스를 움직이면 화살표 끝점도 같이 움직이는 방식임. draw.io가 그렇게 동작함

    • 텍스트 노드에는 앵커가 있어서 붙이기가 동작함. 새 선을 그리거나 기존 선을 움직일 때 초록색 연결점을 볼 수 있을 것임
      draw.io를 쓴다면 PNG 대신 PDF로 내보내는 걸 권함. 그래야 벡터 그래픽으로 유지됨
    • draw.io 파일을 .drawio.svg로 저장할 수 있지 않나?
      몇 번 다이어그램을 그렇게 만들었고, Computer Modern을 써서 그림이 본문과 비슷하게 보이게 했음. 그 정도면 충분했음

  • 정말 보기 좋음. 시작하기 쉽게 프리셋을 몇 개 추가해도 좋을 것 같음. 흔한 신경망 구조나 TikZ의 다른 사용 사례 같은 것들

    • 좋은 생각임. File > Open Example이 있긴 하지만 확장할 여지는 분명 있음. 데스크톱에서는 arXiv 논문을 바로 열 수도 있음

  • 와, 정말 대단함. TikZ 다이어그램을 만들려고 ChatGPT를 써왔는데, 솔직히 TikZ 다이어그램 만들기가 쉽지 않고 잘 만들면 결과물은 정말 예쁨
    다만 ChatGPT로 다이어그램을 세밀하게 수정하게 만드는 건 어렵기도 함. TikZ 문법과 동작에 대한 내 지식이 항상 충분히 정교하지 않아서 원하는 결과를 얻기 힘들 때가 있음. 그래서 이 도구가 그 답처럼 보임. 써보는 게 기대됨
    참고로 블로그용 LaTeX 문서도 ChatGPT로 만들고 서버 쪽에서 렌더링하고 있음. 그 워크플로는 아주 잘 맞음

답변달기