---

name: frago-view-content-generate-tips-markdown description: Markdown document content generation guide. Use this skill when you need to create Markdown documents that can be previewed via frago view. Covers element support, Mermaid charts, and best practices.

Markdown Document Content Generation Guide

Create high-quality Markdown documents that can be previewed via frago view.

Preview Commands

Copyfrago view document.md                    # Default theme
frago view document.md --theme monokai    # Specify code theme

---

Supported Elements

Basic Elements

Extended Elements

---

Mermaid Charts

Supported Chart Types

Flowchart Example

Copy```mermaid
flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Execute]
    B -->|No| D[Skip]
    C --> E[End]
    D --> E
```

XY Chart Example

Copy```mermaid
xychart-beta
    title "Monthly Data"
    x-axis ["Jan", "Feb", "Mar", "Apr"]
    y-axis "Quantity" 0 --> 100
    bar [30, 45, 60, 80]
    line [25, 40, 55, 75]
```

Sequence Diagram Example

Copy```mermaid
sequenceDiagram
    participant U as User
    participant S as Server
    participant D as Database
    U->>S: Send request
    S->>D: Query data
    D-->>S: Return result
    S-->>U: Response data
```

---

Code Blocks

Must Tag Language

Copy```python
def hello():
    print("Hello!")

Copy
**No language tag means no highlighting**.

### Supported Languages

| Language | Tag |
|----------|-----|
| Python | `python` |
| JavaScript | `javascript` / `js` |
| TypeScript | `typescript` / `ts` |
| Bash | `bash` / `sh` |
| JSON | `json` |
| YAML | `yaml` |
| SQL | `sql` |
| Go | `go` |
| Rust | `rust` |
| HTML | `html` |
| CSS | `css` |
| Markdown | `markdown` |

### Code Themes

Default: `github-dark`

Available: `monokai`, `atom-one-dark`, `atom-one-light`, `vs2015`, `github`

---

## Best Practices

### 1. Heading Hierarchy

```markdown
# Document Title (only one)

## Level 1 Section

### Level 2 Section

#### Level 3 Section (avoid deeper levels)

Principle: Maximum 4 levels, deeper hierarchy affects readability.

2. Paragraph Length

• Each paragraph 3-5 sentences
• Single sentence no more than 80 characters
• Blank lines separate paragraphs

3. List Usage

Appropriate: Parallel points, step instructions, feature enumeration

Not appropriate: Continuous narrative, content requiring contextual connection

4. Table Design

• No more than 5 columns
• Cell content brief
• Use lists or paragraphs for complex content

5. Image Handling

Copy![Image description](./images/diagram.png)

Auto-copy: images/, assets/, img/, media/, figures/ directories are automatically copied.

Format recommendations: PNG (lossless), JPG (photos), SVG (vector)

Size recommendations: Source image width 800-1200px, file size < 500KB

---

Things to Avoid

---

Style Reference (GitHub Dark)

---

Template Library

---

Debugging Tips