SpecMind VS Code Extension

Visual editor and preview for SpecMind .sm files.

Features

🎨 Syntax Highlighting

Full .sm file support with proper syntax highlighting
Markdown sections - Headers, lists, emphasis, links
Mermaid code blocks - Keywords, operators, entities
Emoji support - Visual indicators (⚠️, 💡, 🔧, etc.)

📊 Visual Preview

Live preview panel with rendered .sm content
Mermaid diagram rendering - Interactive architecture diagrams
Formatted sections - Overview, requirements, design decisions
Auto-refresh when .sm files are saved

⌨️ Commands & Shortcuts

Open Preview (Ctrl+Shift+V / Cmd+Shift+V)
Open Preview to Side - View source and preview simultaneously
Context menu integration - Right-click .sm files to preview

Usage

Opening .sm Files

Open any .sm file in VS Code
Automatic syntax highlighting will be applied
Click the preview icon in the editor toolbar, or
Press Ctrl+Shift+V to open preview panel

Preview Features

Live updates - Preview refreshes when you save the file
Mermaid rendering - Architecture diagrams are rendered visually
Responsive layout - Adapts to VS Code themes (dark/light)
Section navigation - Clear organization of .sm file sections

Installation

From Marketplace (Coming Soon)

ext install specmind.specmind-vscode

Development Installation

Clone the SpecMind repository
Navigate to packages/vscode/
Run pnpm install && pnpm build
Press F5 to launch Extension Development Host

Supported File Types

.sm files - SpecMind architecture specification files

Commands

Command	Shortcut	Description
`SpecMind: Open Preview`	`Ctrl+Shift+V`	Open preview panel
`SpecMind: Open Preview to the Side`	-	Open preview beside editor

Architecture

This extension integrates with the SpecMind ecosystem:

@specmind/format - Parses .sm files and validates content
Mermaid.js - Renders architecture diagrams
VS Code API - Provides editor integration and webview panels

Dependencies

@specmind/format - .sm file parsing and validation
mermaid - Diagram rendering
@types/vscode - VS Code extension API

Development

Project Structure

packages/vscode/
├── src/
│   ├── extension.ts          # Main extension entry point
│   └── previewPanel.ts       # Webview panel for .sm preview
├── syntaxes/
│   └── specmind.tmGrammar.json  # Syntax highlighting rules
├── language-configuration.json  # Language configuration
└── package.json              # Extension manifest

Building

# Build extension
pnpm build

# Watch for changes
pnpm watch

# Package for distribution
pnpm package

Testing

Open VS Code in the packages/vscode/ directory
Press F5 to launch Extension Development Host
Open a .sm file (try the test fixtures from @specmind/format)
Test syntax highlighting and preview functionality

Examples

The extension works great with the SpecMind test fixtures:

packages/format/test-fixtures/.specmind/system.sm
packages/format/test-fixtures/.specmind/features/user-authentication.sm

These demonstrate:

Complex Mermaid diagrams with subgraphs
Multiple sections (overview, requirements, etc.)
Real-world architecture specifications

Contributing

This extension is part of the SpecMind monorepo. See the main CONSTITUTION.md for development guidelines.

Extension Guidelines

Follow VS Code extension best practices
Keep preview rendering fast and responsive
Support VS Code themes (dark/light)
Maintain compatibility with @specmind/format package