Markdown Guide & Tips

Headers

# H1 Header
## H2 Header
### H3 Header
#### H4 Header
##### H5 Header
###### H6 Header

Emphasis

*italic* or _italic_
**bold** or __bold__
***bold italic*** or ___bold italic___
~~strikethrough~~

Text Highlighting

==highlighted text==
=={red}red highlight with white text==
=={#00ff00}green highlight with black text==
=={yellow}yellow highlight with black text==
=={#000080}navy highlight with white text==

The editor automatically detects if a color is light or dark and adjusts the text color accordingly for optimal readability.

Lists

* Unordered list item
* Another item
  * Nested item

1. Ordered list item
2. Another item
   1. Nested item

Task Lists

[ ] Unchecked task
[x] Checked task
[X] Also checked task (case insensitive)
  [ ] Nested task

Click the checkbox in the preview to toggle its state. The change will be reflected in your markdown.

Links and Images

[Link text](https://example.com)
![Image alt text](https://example.com/image.jpg)

Programming Language Examples

Here are examples of code snippets in different programming languages:

Python

```python
# Python example
def fibonacci(n):
    """Generate Fibonacci sequence up to n"""
    a, b = 0, 1
    while a < n:
        yield a
        a, b = b, a + b
        
# Print the sequence
for num in fibonacci(100):
    print(num)
```

Java

```java
// Java example
public class HelloWorld {
    public static void main(String[] args) {
        // Print "Hello, World!" to the console
        System.out.println("Hello, World!");
        
        // Simple for loop example
        for (int i = 1; i <= 5; i++) {
            System.out.println("Count: " + i);
        }
    }
}
```

Rust

```rust
// Rust example
fn main() {
    // Print "Hello, World!" to the console
    println!("Hello, World!");
    
    // Vector and iterator example
    let numbers = vec![1, 2, 3, 4, 5];
    
    // Functional approach with iterators
    let sum: i32 = numbers.iter()
        .filter(|&n| n % 2 == 0)  // Keep only even numbers
        .map(|n| n * n)           // Square each number
        .sum();                   // Sum all numbers
    
    println!("Sum of squares of even numbers: {}", sum);
}
```

Blockquotes

> This is a blockquote
> Multiple lines
>> Nested blockquote

Blockquotes now feature elegant quote marks and styling for better readability.

Footnotes

Here is text with a footnote[^1].

[^1]: This is the footnote content.

Features:

• Support for multiple footnotes with automatic numbering
• Click on footnote reference to jump to the footnote
• Click on the return arrow to jump back to the reference
• Footnotes are collected at the end of the document

Example with multiple footnotes:

Here is text with a footnote[^first] and another footnote[^second].

[^first]: This is the first footnote.
[^second]: This is the second footnote with multiple
    paragraphs that are intended for the same note.

Tables

| Header 1 | Header 2 |
|----------|-----------|
| Cell 1   | Cell 2   |
| Cell 3   | Cell 4   |

Video Embedding

You can embed videos from YouTube (including Shorts) and Vimeo using the following syntax:

@[youtube](https://www.youtube.com/watch?v=VIDEO_URL)
@[youtube](https://www.youtube.com/shorts/VIDEO_URL)
@[youtube](https://youtu.be/VIDEO_URL)


@[vimeo](https://vimeo.com/VIDEO_URL)

Examples:

@[youtube](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
@[youtube](https://www.youtube.com/shorts/cLNeDHpsAnE)
@[youtube](https://youtu.be/dQw4w9WgXcQ)


@[vimeo](https://vimeo.com/148751763)

Features:

• Automatic video thumbnail preview
• Click-to-play functionality
• Support for multiple video platforms
• Responsive video player that maintains aspect ratio
• Support for both regular videos and shorts

Mermaid Diagrams

Create beautiful diagrams and charts directly in your markdown using Mermaid syntax. Diagrams automatically adapt to your chosen theme with proper contrast and colors.

Sequence Diagrams

Show interactions between different actors or systems:

```mermaid
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 great!
```

Flowcharts

Create process flows and decision trees:

```mermaid
graph TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B -->|No| E[End]
```

Simple Graphs

Show relationships between concepts:

```mermaid
graph TD
    Biology --> Chemistry
    Chemistry --> Physics
    Physics --> Mathematics
```

Git Graphs

Visualize version control branching and merging:

```mermaid
gitgraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit
```

Pie Charts

Display data proportions:

```mermaid
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rabbits" : 15
```

State Diagrams

Show system states and transitions:

```mermaid
stateDiagram-v2
    [*] --> Still
    Still --> [*]
    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]
```

Class Diagrams

Visualize object-oriented design:

```mermaid
classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    class Duck{
        +String beakColor
        +swim()
        +quack()
    }
```

Supported Diagram Types:

• Sequence Diagrams - Actor interactions and message flows
• Flowcharts - Process flows and decision trees
• Git Graphs - Version control visualization
• Pie Charts - Data proportions and percentages
• State Diagrams - System states and transitions
• Class Diagrams - Object-oriented design
• Entity Relationship Diagrams - Database relationships
• User Journey Maps - User experience flows
• Gantt Charts - Project timelines
• Requirement Diagrams - System requirements
• Mindmaps - Hierarchical information
• Timeline Diagrams - Chronological events

Features:

• Real-time rendering as you type
• Automatic theme integration with high contrast
• Mobile responsive design
• Export support (diagrams included in PDF/HTML exports)
• Error handling with graceful fallbacks

Learn More:

For comprehensive documentation, syntax examples, and advanced features, visit the official Mermaid Documentation. You can also try the Mermaid Live Editor to experiment with diagram syntax before adding it to your markdown.

Canvas Feature

Create visual mind maps, flowcharts, and diagrams using the interactive Canvas feature. This Obsidian-style canvas allows you to organize ideas visually with blocks and connections.

Getting Started

Access the Canvas feature in two ways:

• Main Navigation: Click the Canvas button (network icon) in the left sidebar
• File Explorer: Click the "New Canvas" button in the file explorer pane

Canvas Controls

Toolbar Buttons:

• Back to Editor: Return to the markdown editor
• Add Block: Create a new content block
• Clear Canvas: Remove all blocks and arrows (with confirmation)
• Duplicate: Copy the selected block
• Zoom Indicator: Shows current zoom level (100%)

Working with Blocks

Creating Blocks:

• Click "Add Block" button to create a new block
• Blocks appear with a default title and empty content area
• Each block has a header with title input and control buttons

Editing Blocks:

• Title: Click on the title to edit it
• Content: Click in the content area to add text
• Moving: Drag blocks by their header to reposition
• Selecting: Click on a block to select it (shows blue border and slight scale)

Block Controls:

• Color Picker: Change block background color (16 predefined colors)
• Delete: Remove the block and all connected arrows

Creating Connections

Connection Points:

• Each block has 4 connection points (top, bottom, left, right)
• Connection points appear when hovering over a block
• Drag from one connection point to another to create arrows

Arrow Physics:

• Straight Lines: Horizontal and vertical connections use straight arrows
• Curved Lines: Diagonal connections use intelligent curved arrows
• Direction-Aware: Curves bend in the direction of movement

Navigation & Interaction

Canvas Navigation:

• Panning: Click and drag on empty space to move around
• Zooming: Use mouse wheel to zoom in/out (10% - 300%)
• Infinite Canvas: Unlimited scrolling in all directions

Minimap:

• Small overview map in the bottom-right corner
• Shows all blocks and arrows at a glance
• Click to quickly navigate to different areas
• Viewport indicator shows current visible area

Keyboard Shortcuts

• Delete/Backspace: Delete selected block or arrow
• Escape: Deselect all items
• Ctrl+D / Cmd+D: Duplicate selected block

Color Customization

Block Colors:

• 16 predefined aesthetic colors available
• Automatic text contrast adjustment (dark text on light backgrounds, light text on dark backgrounds)
• Colors persist when saving and loading canvas files
• Default color uses current theme background

File Management

Saving & Loading:

• Canvas files are saved with .canvas extension
• Auto-save functionality preserves your work
• Canvas files appear in file explorer with network chart icon
• Switch between markdown and canvas files seamlessly

File Explorer Integration:

• Canvas files show with distinct network chart icon
• Create new canvas files directly from file explorer
• Supports both browser storage and local file system modes

Use Cases

• Mind Mapping: Organize ideas and concepts visually
• Project Planning: Create task flows and dependencies
• Note Organization: Connect related notes and thoughts
• Brainstorming: Visual idea generation and connection
• Process Design: Map out workflows and procedures
• Knowledge Graphs: Link concepts and information

Tips for Effective Canvas Use

• Use different colors to categorize related blocks
• Keep block titles concise and descriptive
• Use the minimap for navigation in large canvases
• Regularly save your work (auto-save helps but manual saves are good practice)
• Experiment with different layouts to find what works best
• Use straight connections for hierarchical relationships
• Use curved connections for associative relationships