What is Typst and why is it used here?

Typst is a modern, high-performance typesetting system. It is used in this skill to generate crisp, professional-grade vector diagrams that are easier to version control and customize than standard image files.

Can I modify a flowchart after it has been generated?

Yes, because the skill produces code, you can ask Claude to adjust labels, change node shapes, or re-route connections to better fit your intent.

What types of diagrams can this skill create?

It is optimized for directed flowcharts, state diagrams, process maps, and any hierarchical logic that can be represented by nodes and arrows.

Do I need to learn CeTZ syntax to use this skill?

No, you can describe your flowchart in plain text or simple logical steps. The AI handles the conversion of your description into the appropriate CeTZ drawing commands.

How do I see the final result of the generated code?

The skill generates a .typ file which can be compiled into a PDF or PNG using the Typst compiler, providing a publishable asset for your project documentation.

Typst Flowchart Generator

Name: Typst Flowchart Generator
Author: hmyuuu

byhmyuuu

0•

학습 및 문서화

Generates professional flowcharts and technical diagrams using the Typst typesetting system and CeTZ library.

The Flowchart skill empowers Claude to programmatically create high-quality vector diagrams, state machines, and process flows. By leveraging Typst and the CeTZ drawing package, it transforms plain text descriptions of logic into structured visual assets. This skill is ideal for developers and technical writers who need to document complex system architectures, decision trees, or workflows without manual drawing tools, ensuring consistency and ease of iteration through AI-driven code generation.

주요 기능

01Generates clean, customizable Typst code compatible with professional documentation workflows

02Supports multiple node types including process rectangles, decision diamonds, and terminal circles

03Automated arrow routing with customizable labels and anchor points

04L2 Directed autonomy for iterative refinement of diagram layouts and spacing

050 GitHub stars

06Built-in patterns for sequential flows, conditional branching, and looping logic

사용 사례

01Visualizing complex business logic or decision trees within a codebase

02Documenting system architecture and component interactions for technical manuals

03Creating state transition diagrams to map out application behavior and UX flows

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add hmyuuu/skills flowchart

For use in Claude.ai and ChatGPT

Download Skill