axton-obsidian-visual-skills

🥇Gold

The Axton Obsidian Visual Skills Pack enables users to effortlessly create visual diagrams such as Canvas, Excalidraw, and Mermaid from text inputs using Claude Code. This tool enhances productivity by streamlining visual content generation directly within the Obsidian environment.

2,1231020Updated 1w ago

Intermediate15 minutes to implementproductivity

Saves ~45 min per use

Quick InstallView Source

claude install axtonliu/axton-obsidian-visual-skills

Works with:

Claude

Overview

About This Skill

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

How to Use

1. **Choose the Diagram Type**: Decide whether you need a Canvas, Excalidraw, or Mermaid diagram based on your requirements. Canvas is great for mind maps and knowledge graphs, Excalidraw for hand-drawn style diagrams, and Mermaid for flowcharts and sequence diagrams. 2. **Prepare Your Description**: Write a detailed description of the diagram you want to create. Include all key elements, relationships, and any specific styling preferences. 3. **Use the Prompt Template**: Copy the prompt template and fill in the placeholders with your chosen diagram type, tool name, and description. Paste the completed prompt into Claude Code. 4. **Review and Refine**: Claude will generate the diagram code. Review the output and make any necessary adjustments to the description or prompt to refine the diagram. 5. **Integrate into Obsidian**: Copy the generated code and paste it into your Obsidian note. Ensure the appropriate plugin (Mermaid, Excalidraw, etc.) is enabled to render the diagram.

Use Cases

Generate flowcharts for project planning to visualize task sequences.

Create mind maps for brainstorming sessions to organize ideas effectively.

Visualize data relationships with Mermaid diagrams for clear documentation.

Produce quick sketches for design concepts using Excalidraw.

Best For

MarketingGrowth

Setup & Installation

Quick Install

Terminal

claude install axtonliu/axton-obsidian-visual-skills

Alternative Install (Git Clone)

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

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Create a [DIAGRAM_TYPE] diagram in [TOOL_NAME] format based on the following description: [DESCRIPTION]. Ensure the diagram includes all key elements and relationships. Use appropriate styling and layout to make it visually clear. For example, if the diagram type is a flowchart, include clear start and end points, decision nodes, and directional arrows.

Example Output

Here's a Mermaid.js flowchart created based on the description of a customer onboarding process:

```mermaid
flowchart TD
    A[Start] --> B{New Lead}
    B -->|Qualified| C[Schedule Demo]
    B -->|Not Qualified| D[End]
    C --> E[Demo Completed]
    E --> F{Interested?}
    F -->|Yes| G[Send Proposal]
    F -->|No| D
    G --> H[Proposal Accepted]
    G -->|Proposal Rejected| D
    H --> I[Onboarding Started]
    I --> J[End]
```

This flowchart clearly outlines the customer onboarding process with distinct stages and decision points. The use of directional arrows and clear labeling ensures the process is easy to follow. The diagram can be directly used in Obsidian with the Mermaid plugin enabled.