Markdown Document Content Generation Guide

Markdown Document Content Generation Guide

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

Preview Commands

frago 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

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

XY Chart Example

```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

```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

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

**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

![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