agentleFS
Sign inStart free
BitSteveBitSteve/claude-skills/canvas-to-html/SKILL.md

canvas-to-html

Skill0 starsChanged 10 months agoMITView on GitHub

Convert Obsidian Canvas (.canvas) JSON files to standalone HTML for viewing on GitHub or in browsers. Use when users want to export, convert, or view canvas files as HTML, share canvas diagrams outside Obsidian, or need a web-viewable version of their .canvas files. Handles edge cases like scrollable content for long text, proper box sizing, markdown rendering, and SVG edge connections.

1 other project uses a version of this.

Adopted by

Most recently taken up by

  • Other versions1 project uses a version of this.

    Word for word · 0

    None found.

    Edited · 0

    None found.

    Wrote their own version · 1

    1. Jlosev/agent-skills★ 1same name

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • In this repositoryOne other file it gives its agents.

The file

We split this skill into the rules it gives an agent

4 rules. About 0 are common, 3 are distinctive, and 1 is very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈3

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 1

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Run the conversion script:

    line 12
  2. Very specific:

    If no output path is specified, creates <input-name>.html in the same directory.

    line 23
  3. Distinctive:

    Standalone HTML: No external dependencies, embedded CSS

    line 50
  4. Distinctive:

    Import and call directly:

    line 82

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Canvas to HTML Converter

Convert Obsidian Canvas (.canvas) files to standalone, GitHub-viewable HTML.

Quick Start

Run the conversion script:

python scripts/canvas_to_html.py <input.canvas> [-o output.html]

Example:

python scripts/canvas_to_html.py architecture.canvas -o architecture.html

If no output path is specified, creates <input-name>.html in the same directory.

Features

The converter handles:

FeatureImplementation
Long text contentScrollable containers within fixed node bounds
Markdown renderingHeaders, bold, italic, code, tables, lists, links
Node typesText, file, link, and group nodes
Edge connectionsSVG paths with arrows and labels
Color presetsMaps "1"-"6" to Obsidian-like colors
GroupsDashed border containers with labels

Content Overflow Handling

Nodes with content exceeding their dimensions get:

  • overflow: auto on the content container
  • Styled scrollbars (thin, semi-transparent)
  • Fixed outer dimensions matching canvas specification
  • Inner content scrollable both vertically and horizontally

This ensures long text, tables, or code blocks remain readable without breaking the visual layout.

Output Characteristics

  • Standalone HTML: No external dependencies, embedded CSS
  • Dark theme: GitHub-compatible dark background
  • Responsive scrolling: Both canvas-level and node-level scrolling
  • Preserved layout: Exact node positions from canvas JSON

Markdown Support

ElementSyntax
Headers# through ######
Bold**text**
Italic*text*
Strikethrough~~text~~
Code (inline)`code`
Code blocks```lang ... ```
Links[text](url)
Lists- item or * item
Tables`colcol` format

Color Mapping

PresetHex ValueColor
"1"#fb464cRed
"2"#e9973fOrange
"3"#e0de71Yellow
"4"#44cf6eGreen
"5"#53dfddCyan
"6"#a882ffPurple

Programmatic Usage

Import and call directly:

from canvas_to_html import convert_canvas_to_html

# Basic conversion
output_path = convert_canvas_to_html("diagram.canvas")

# With custom output path
output_path = convert_canvas_to_html("diagram.canvas", "output/diagram.html")

Edge Cases Handled

  1. Content overflow: Scrollable containers prevent text from being cut off
  2. Negative coordinates: Canvas bounds calculated to include all nodes
  3. Missing optional fields: Sensible defaults for colors, sides, labels
  4. Special characters: HTML entities properly escaped
  5. Empty canvas: Generates valid HTML with minimal dimensions
  6. Large canvases: Viewport scrolling for oversized diagrams

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free