Hi HN,

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.

Example prompts:

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

Technical Notes:

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!