Feature: Add browser URL output mode to skill-cli

[AlseinX]

Summary

Add a url output mode to the Claude Code skill that generates a draw.io browser URL (same mechanism as the MCP Tool Server), so users can open diagrams in the browser without running a separate MCP server or installing draw.io Desktop.

Motivation

Currently, the four integration approaches serve different needs:

Approach	Output	Fixed context cost	Dependencies
MCP App Server	Inline in chat	Low (remote)	MCP Apps host
MCP Tool Server	Browser URL	~12K tokens (XML ref + Mermaid ref embedded in tool descriptions)	MCP client
Skill + CLI	Local .drawio file	~1K (SKILL.md, loaded on-demand only when skill is invoked)	draw.io Desktop (for export)
Project Instructions	Clickable link	~0	Nothing

The MCP Tool Server embeds shared/xml-reference.md (~8,400 tokens) and shared/mermaid-reference.md (~3,400 tokens) directly in tool descriptions — ~12K tokens permanently in context, even when the user never creates a diagram. (Token counts measured with tiktoken against current main.)

The skill-cli approach avoids this cost by loading the XML reference on-demand. But it currently only supports local file output, requiring either draw.io Desktop or a manual file-open step.

Bridging the gap: if the skill could also generate browser URLs, users would get the best of both worlds — on-demand context loading + browser-based editing — without needing an MCP server or draw.io Desktop.

Proposed behavior

Add a url format option to the skill:

• /drawio url flowchart for user login → opens browser with diagram
• /drawio url architecture overview → opens browser with diagram

When url is specified, the skill would:

1. Generate draw.io XML (same as current flow)
2. Write the .drawio file (for persistence / re-editing)
3. Generate a https://app.diagrams.net/#create=... URL from the XML
4. Open it in the default browser

Implementation

The URL generation uses only Node.js built-in modules (zlib for deflate, child_process for opening the browser) — no external dependencies required.

The core logic (same compression + URL format as mcp-tool-server/src/index.js):

1. Read the XML file
2. encodeURIComponent(xml) → zlib.deflateRawSync() → base64 encode
3. Build https://app.diagrams.net/?grid=0&pv=0&border=10&edit=_blank#create={type:"xml",compressed:true,data:<b64>}
4. Open URL in default browser (macOS: open, Linux: xdg-open, Windows: .url temp file workaround to preserve # fragment)

Why zlib works as a pako replacement

The MCP Tool Server uses pako.deflateRaw() for compression. Node.js's built-in zlib.deflateRawSync() implements the same algorithm (RFC 1951). The output is identical for the same input, so URLs generated by either approach are interchangeable — draw.io's #create handler will decompress them correctly.

The Windows .url temp file workaround is also borrowed directly from the MCP Tool Server, which added it to prevent cmd.exe from stripping the #create= fragment (see mcp-tool-server/src/index.js).

Updated format table

Format	Output	Dependency
(default)	.drawio file	None
png / svg / pdf	.drawio.png / .svg / .pdf	draw.io Desktop
url (proposed)	Browser tab at app.diagrams.net	Node.js (already available in Claude Code)

Benefits

1. No fixed context cost — XML reference is fetched on-demand when the skill is invoked, not permanently embedded in tool descriptions
2. No MCP server needed — works in Claude Code without any MCP configuration
3. No draw.io Desktop needed — diagrams open directly in the browser editor
4. No external dependencies — uses only Node.js built-in zlib
5. Consistent URL format — same #create= protocol as MCP Tool Server, so behavior is identical
6. Complements existing modes — url for quick browser viewing, local files for persistence/export

Considerations

• URL length: The URL contains the full diagram data in the hash fragment. Very large diagrams may hit browser URL length limits. The MCP Tool Server has the same constraint.
• Mermaid/CSV via URL: The #create protocol also supports type: "mermaid" and type: "csv". This could be a follow-up enhancement if the skill ever adds Mermaid support.
• Persistence: When using url mode, the skill should still write the .drawio file locally so the user has a persistent copy they can re-edit.