How does Drawnote generate images from text?

Drawnote creates a structured HTML/CSS file based on your input and uses Playwright to capture a high-resolution screenshot of the rendered design.

Does this skill require special file read permissions?

No, version 2.0 is optimized with built-in templates, allowing it to function fully without requesting additional file system read permissions.

What visual styles are available?

You can choose from several presets including Professional Business, Colorful Handwritten Note, Tech Innovation, Natural Fresh, and Modern Minimalist.

Where are the generated files saved?

All generated HTML and PNG files are automatically saved to your current working directory (CWD) for immediate use in your projects.

Can I use Drawnote for topics I haven't researched yet?

Yes, if you provide a keyword, the skill can trigger a web search to gather relevant information before synthesizing it into a visual format.

Drawnote Visualizer

Name: Drawnote Visualizer
Author: peterfei

bypeterfei

•

212

•

디자인 도구

Generates stunning visual notes, flowcharts, and mind maps from text and exports them as high-quality images directly in your workspace.

Drawnote is a specialized Claude Code skill designed to transform raw text or keywords into professional visual documentation. By leveraging built-in HTML/CSS templates and Playwright-driven rendering, it automates the creation of polished infographics, hand-drawn style notes, and technical flowcharts. It operates entirely within the user's local workspace, requiring no external file read permissions, making it an ideal tool for rapid knowledge synthesis, process mapping, and educational content creation without leaving the terminal environment.

주요 기능

01Automated workspace management that saves all generated files directly to the current working directory.

02WebSearch integration for enriching keyword-based topics into comprehensive diagrams.

03212 GitHub stars

04Automatic HTML-to-Image rendering using Playwright for high-resolution PNG exports.

05Multiple built-in visual styles including Professional Business, Tech Innovation, and Colorful Handwritten.

06Zero-permission runtime utilizing embedded prompt templates for enhanced security and speed.

사용 사례

01Converting complex technical documentation into visual flowcharts for system architecture reviews.

02Creating aesthetically pleasing study notes and summaries from academic or research text.

03Generating professional business infographics and mind maps for presentations or documentation.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add peterfei/ai-agent-team drawnote

For use in Claude.ai and ChatGPT

Download Skill