Synapse

Advanced Markdown Preview with Knowledge Graph Visualization

A powerful VS Code extension for enhanced Markdown rendering with graph visualization, backlinks, tags, and rich content support.

---

Overview

Synapse transforms your Markdown workflow by providing real-time preview, knowledge graph visualization, and advanced content rendering. Connect your notes, visualize relationships, and organize knowledge with tags and backlinks—all within VS Code.

---

✨ Features

Enhanced Markdown Preview

• Live Preview Panel: Real-time rendering of Markdown documents with support for extended syntax
• Tables: Full support for pipe tables with alignment control
• Code Highlighting: Syntax highlighting for multiple programming languages
• Mathematical Expressions: LaTeX rendering for inline and block equations

🔗 Knowledge Graph

• Backlink Support: Navigate between documents using [[document-name]] syntax
• Graph Visualization: Visual representation of document relationships and connections
• Tag System: Organize content with #tags for easy categorization
• Link Index: Automatic indexing of all links and references

Interactive graph showing document connections and relationships

Diagram Support

• Mermaid Diagrams: Full support for Mermaid syntax including:
  • Sequence diagrams
  • Flowcharts
  • Class diagrams
  • State diagrams
  • And more

Rich Content Rendering

Callout Blocks

Support for multiple callout types with distinctive styling:

• > [!note] - General notes and information
• > [!abstract] - Summaries and abstracts
• > [!info] - Information blocks
• > [!todo] - Action items and tasks
• > [!tip] - Tips and hints
• > [!success] - Successful outcomes
• > [!question] - Questions and FAQs
• > [!warning] - Warnings and cautions
• > [!failure] - Failure cases
• > [!danger] - Dangerous content
• > [!bug] - Bug reports
• > [!example] - Examples
• > [!quote] - Quotes and citations

Checklists

Full support for task lists:

- [x] Completed task
- [ ] Pending task

Block Quotes

Enhanced block quote rendering with support for nested content and formatting.

Usage Examples

Tables and Data

Synapse renders tables beautifully with full alignment control:

Header 1	Header 2	Header 3
Left align	Center align	Right align
Row 1, Col 1	Row 1, Col 2	Row 1, Col 3
Row 2, Col 1	Row 2, Col 2	Row 2, Col 3

Fruit	Color	Stock
Apple	Red	120
Banana	Yellow	250
Grape	Purple	300

Real-time table rendering with syntax highlighting

🔗 Backlinks and Tags

Create knowledge connections with intuitive syntax:

#test #test2 #anothertest

[[document-name]]
[[nested/document]]

Tags are automatically indexed and displayed in the sidebar for quick navigation.

Mermaid Diagrams

Full support for Mermaid diagram syntax:

sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel so great!
    Alice-->>+John: Thanks!

Loading

Interactive sequence diagram rendered in preview

Mathematical Expressions

Inline math with LaTeX:

$E = mc^2$

Block equations:

$$
\begin{align}
\nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\
\pi & = 3.14
\end{align}
$$

Matrix notation:

$$
\begin{vmatrix}
a & b \\
c & d
\end{vmatrix} = ad - bc
$$

LaTeX math rendering with proper formatting

Callout Blocks

Rich callout support for organized information:

Styled callout blocks with icons and colors

> [!note]
> General notes and information

> [!tip]
> Helpful tips and hints

> [!warning]
> Important warnings

> [!success]
> Success messages

> [!question]
> Questions and FAQs

> [!danger]
> Dangerous content

> [!example]
> Examples and demonstrations

Task Lists

Organized task management:

- [x] Completed task
- [x] Another completed task
- [ ] Pending task
- [ ] Future task

💻 Code Highlighting

import os
if a in b:
    print("Hello, World!")

Supported languages: Python, JavaScript, TypeScript, Java, C++, Rust, Go, and many more.

Embedding Content

Embed external files and images:

![[file.md]]
![[image.png]]
![[document.pdf]]

External content embedded and rendered seamlessly

Views & Interface

Preview View

Real-time live preview of your Markdown content with all advanced formatting rendered instantly:

Live preview panel showing rendered content side-by-side with source

• Instant rendering as you type
• Full support for all extended syntax
• Syntax highlighting for code blocks
• Mathematical expressions and diagrams
• Interactive links and backlinks

Graph View

Visual knowledge base with interactive graph visualization:

Interactive network graph showing document relationships and tags

• Connected Documents: See how your files relate to each other
• Backlink Relationships: Visual representation of bidirectional links
• Tag Correlations: Document grouping by tags
• Network Topology: Interactive exploration of your knowledge base
• Zoom & Pan: Navigate large graphs intuitively

Getting Started

Installation

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Synapse"
4. Click Install

Quick Start

1. Create or open a Markdown file
2. Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
3. Search for "Synapse Preview" to open the preview panel
4. Search for "Synapse Graph" to visualize your knowledge base

Example Workflow

# My Knowledge Base

## Topic 1
#project #important

Content with [[Topic 2]] reference...

## Topic 2
#project

[[Topic 1]] | [[Topic 3]]

\`\`\`
code example
\`\`\`

---

System Requirements

Requirement	Version
VS Code	1.60.0 or higher
Node.js	12.x or higher
OS	Windows, macOS, Linux

---

⌨Keyboard Shortcuts

Action	Shortcut
Open Command Palette	Ctrl+Shift+P / Cmd+Shift+P
Open Preview	Search "Synapse Preview"
Open Graph View	Search "Synapse Graph"
Toggle Preview	Ctrl+Shift+V / Cmd+Shift+V

---

Advanced Features

Extended Markdown Support

• Pipe Tables with alignment
• Task Lists with checkboxes
• Callout Blocks with multiple types
• LaTeX mathematical expressions
• Mermaid diagrams (sequence, flowchart, class, state, etc.)
• Code Highlighting for 100+ languages
• Block Quotes with nesting
• Inline Formatting (bold, italic, strikethrough, etc.)

Knowledge Management

• Automatic backlink detection
• Bidirectional link support
• Tag-based organization
• Link preview on hover
• Broken link detection

Performance Optimizations

• Efficient graph rendering
• Real-time preview updates
• Optimized for large document networks
• Smooth scrolling and panning
• Memory-efficient tag indexing

---

Configuration

Synapse works out of the box with sensible defaults. For advanced configuration:

1. Open Settings (Ctrl+Comma / Cmd+Comma)
2. Search for "Synapse"
3. Configure options as needed

---

🐛 Troubleshooting

Graph not loading?

• Ensure markdown files contain valid backlink syntax: [[document]]
• Check file paths are accessible

Preview not updating?

• Save the markdown file to trigger refresh
• Reload window: Ctrl+Shift+P → "Reload Window"

Performance issues?

• Close unnecessary preview tabs
• Reduce graph node count by filtering tags
• Check VS Code memory usage in Task Manager

For additional issues, please open an issue on GitHub.

---

Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

License

This project is licensed under the MIT License. See LICENSE file for details.

---

Support & Feedback

Found a bug? Have a feature request? Please open an issue on GitHub.

For questions or discussions, reach out via GitHub Discussions.

---

Synapse — Connecting your knowledge base
Transform the way you work with Markdown