I built a set of Claude Code skills that turn text into three types of visual diagrams for Obsidian users.

The Problem:

I take lots of notes in Obsidian. When I want to visualize concepts, I have to manually draw in Excalidraw (time-consuming), write Mermaid syntax (syntax errors, trial and error), or arrange Canvas nodes by hand (tedious positioning).

What It Does:

Three skills, each outputs a different format:

  1. Excalidraw Diagram – Hand-drawn style diagrams with CJK font support. Three output modes: Obsidian (.md), Standard (.excalidraw), and Animated.

  2. Mermaid Visualizer – Flowcharts, sequence diagrams, state diagrams. Built-in syntax error prevention for common pitfalls (list conflicts, subgraph naming, special characters).

  3. Canvas Creator – Obsidian's native .canvas format. MindMap or Freeform layouts with automatic spacing algorithms.

  "Create an Excalidraw flowchart showing the CI/CD pipeline"
  "Visualize this process as a Mermaid diagram"
  "Turn this article into an Obsidian Canvas"

Skills are just Markdown files that Claude Code loads on demand. No server setup, no API keys needed (unless you want image export). The Mermaid skill has built-in error prevention rules learned from 50+ common failures.

Repo: https://github.com/axtonliu/axton-obsidian-visual-skills

Demo video and screenshots in the README.

Happy to discuss the error prevention approach or Excalidraw animation mode!