Skip to main content
Open App
Reviewed on July 22, 2026Product version 1.8.2
On this page

Complete Markdown Document Example

← Back to Markdown examples

Welcome to Raziel.MD! 🚀

This document demonstrates the main rendering features available in the app.

Main features

  • ✅ Markdown rendering: Markdown with GFM support
  • 📊 Mermaid diagrams: flowcharts, sequences, and other diagrams
  • 🎨 Syntax highlighting: code in multiple languages
  • 🌙 Themes: light and dark modes
  • 💾 Offline use: documents stored locally

Formatting examples

Lists

Unordered list

  • Item 1
  • Item 2
    • Subitem 2.1
    • Subitem 2.2
  • Item 3

Ordered list

  1. First item
  2. Second item
  3. Third item

Code

Inline code: const hello = "world"

JavaScript code block:

function fibonacci(n) {
  if (n <= 1) return n
  return fibonacci(n - 1) + fibonacci(n - 2)
}

console.log(fibonacci(10)) // 55

Python code block:

def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

print(quicksort([3, 6, 8, 10, 1, 2, 1]))

Tables

FeatureSupportDescription
Markdown✅Rendering with GFM
Mermaid✅Diagrams and flowcharts
Offline✅IndexedDB and Service Worker
Search✅Search in names and content

Blockquotes

Simplicity is the ultimate sophistication.

  • Leonardo da Vinci

Links

Markdown documentation

Mermaid diagrams

Flowchart

graph TD
    A[Upload files] --> B{Is it a .md file?}
    B -->|Yes| C[Process content]
    B -->|No| D[Ignore]
    C --> E[Save in IndexedDB]
    E --> F[Render in the interface]
    F --> G[View Markdown]

Sequence diagram

sequenceDiagram
    participant U as User
    participant A as App
    participant DB as IndexedDB

    U->>A: Upload file
    A->>A: Validate format
    A->>DB: Save file
    DB-->>A: Confirm
    A-->>U: Show success
    U->>A: Select file
    A->>DB: Get content
    DB-->>A: Return content
    A->>A: Render Markdown
    A-->>U: Show document

Class diagram

classDiagram
    class MarkdownFile {
        +number id
        +string path
        +string name
        +string content
        +Date createdAt
        +Date updatedAt
    }

    class IndexedDB {
        +saveFile()
        +getAllFiles()
        +getFileByPath()
        +searchFiles()
        +deleteFile()
    }

    class MarkdownViewer {
        +renderMarkdown()
        +renderMermaid()
        +exportFile()
    }

    IndexedDB --> MarkdownFile
    MarkdownViewer --> MarkdownFile

Pie chart

pie title Feature distribution
    "File upload" : 20
    "Navigation" : 25
    "Rendering" : 30
    "Search" : 15
    "Offline support" : 10

Wiki-links create connections between documents. Select any example:

[[./example]]

Link with custom display text

[[./example|Back to this example]]

[[mermaid-examples.md#timeline|Go to the Timeline]]

[[#code|Go to the Code section]]

Content inside the block must not become a link:

[[this/link/must/not/become/html]]

Internal links open in the same tab. Use Ctrl+Click or the middle mouse button to open a new tab.

Tip: right-click a link to see actions such as open, open in a new tab, and copy link.

External links display a confirmation before opening:

Advanced features

Task lists

  • Import files
  • Create tree navigation
  • Render Markdown
  • Render Mermaid
  • Add search
  • Create my own notes
  • Organize a personal library

Text formatting

Bold, italic, strikethrough, and inline code.

Combined bold and italic

Horizontal rule

Sanitization examples

Raziel.MD sanitizes potentially dangerous HTML. The examples below should be displayed without running scripts.

<script>alert("XSS")</script>

<img src="x" onerror="alert('XSS through an attribute')">

<div onclick="alert('XSS through an event')">Select here</div>

<iframe src="javascript:alert('XSS through an iframe')"></iframe>

Conclusion

This document demonstrates essential Raziel.MD features. Create your own documents and organize your personal knowledge base.

Keep exploring