📝

Markdown エディタ

リアルタイムプレビューと Mermaid グラフをサポートするプロフェッショナルな Markdown エディタ。

Markdownエディタの特長は？

メモ作成や技術ドキュメントの執筆に適したMarkdownエディタです。GitHub準拠の記法をサポートしており、リアルタイムプレビューで仕上がりを確認しながら執筆できます。また、Mermaidによる図表作成も可能です。

Benefits

書きながらプレビュー画面で瞬時に見た目を確認できます
Mermaid対応で、フローチャートやグラフをテキストで簡単に作成
エディタとプレビューの同時スクロールで、長い文章も快適に編集
完全にブラウザ内で処理を行うため、大切な情報が外部に漏れません

使い方は？

1. 左側のエディタにMarkdown形式で文章を入力します。
2. 図表を入れたい場合は、Mermaidのコードブロックを使用します。
3. 右側のプレビューパネルで、実際の表示を確認します。
4. 完了したら「エクスポート」から保存するか、内容をコピーします。

ファイルをインポート

# Welcome to Markdown Editor

This is a professional-grade Markdown editor with **real-time preview**, **GitHub-style rendering**, and **Mermaid support**.

## 🚀 Getting Started

- **Real-time Preview**: Edit on the left, see results on the right.
- **Emoji Search**: Type `@` followed by a name (e.g., `@happy`) to quickly insert emojis.
- **Syntax Highlighting**: Beautiful highlighting for various programming languages.

---

## 📝 Markdown Syntax Examples

### 1. Typography
You can use **bold**, *italic*, or ~~strikethrough~~.
Even support custom tags: [+This is an insertion+], [-This is a deletion-], and [color:orange]{Important Text}.

### 2. Lists
#### Unordered List
- Item 1
- Item 2
  - Sub-item 2.1
  - Sub-item 2.2
  - [color:orange]{Important Text}

#### Ordered List
1. First item
2. Second item
3. Third item

#### Task List
- [x] Finished task
- [ ] Unfinished task

### 3. Blockquotes & Tables

> Professional-grade writing requires professional-grade tools. This editor is designed for speed and clarity.

| Feature | Support | Performance |
| :--- | :---: | ---: |
| GFM | ✅ Yes | 🚀 High |
| Mermaid | ✅ Yes | ⚡ Fast |
| Tables | ✅ Yes | 📈 Stable |

---

## 🎨 Advanced Features

### 4. Code Blocks
```typescript
function HelloWorld() {
  console.log("Hello, AttendionFlow!");
}
```

### 5. Mermaid Flowcharts
```mermaid
graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Keep trying!];
    C --> E[Celebrate! 🎉];
    D --> B;
```

### 6. Links & Images
[Learn more about AttendionFlow](https://github.com/yaohsienhuang/attentionflow)

---
*Happy writing!* ✍️

Welcome to Markdown Editor

This is a professional-grade Markdown editor with real-time preview, GitHub-style rendering, and Mermaid support.

🚀 Getting Started

Real-time Preview: Edit on the left, see results on the right.
Emoji Search: Type @ followed by a name (e.g., @happy) to quickly insert emojis.
Syntax Highlighting: Beautiful highlighting for various programming languages.

📝 Markdown Syntax Examples

1. Typography

You can use bold, italic, or ~~strikethrough~~. Even support custom tags: This is an insertion, ~~This is a deletion~~, and Important Text.

2. Lists

Unordered List

Item 1
Item 2
- Sub-item 2.1
- Sub-item 2.2
- Important Text

Ordered List

First item
Second item
Third item

Task List

Finished task
Unfinished task

3. Blockquotes & Tables

Professional-grade writing requires professional-grade tools. This editor is designed for speed and clarity.

Feature	Support	Performance
GFM	✅ Yes	🚀 High
Mermaid	✅ Yes	⚡ Fast
Tables	✅ Yes	📈 Stable

🎨 Advanced Features

4. Code Blocks

function HelloWorld() {
  console.log("Hello, AttendionFlow!");
}

5. Mermaid Flowcharts

graph TD;
    A[Start] --> B{Is it working?};
    B -- Yes --> C[Great!];
    B -- No --> D[Keep trying!];
    C --> E[Celebrate! 🎉];
    D --> B;

6. Links & Images

Learn more about AttendionFlow

Happy writing! ✍️

#Basic Syntax

# Heading 1H1
**Bold**Bold
*Italic*Italic
~~Strike~~Strike

listLists & Tasks

- List ItemBullet
1. ItemNumber
- [x] TaskDone
- [ ] TaskTodo

&Advanced Syntax

[Text](URL)Link
> QuoteQuote
| Table |Table
`Code`Inline

!Custom Tags

[+Add+]Ins
[-Del-]Del
[color:orange]{Important Text}Color
```mermaidGraph

他の便利なツールを探索

🗄️

JSON成形ツール

開発者のためのJSON成形・検証・圧縮ツール。

🎨

HTMLカラーピッカー

HSL/RGB/HEX対応の高度なHTMLカラーピッカー。

🧪

カラー抽出ツール

画像、カメラ、URLからカラーパレットを抽出するインテリジェントツール。

🎡

ラッキーホイール

プロ仕様のオンライン抽選・ルーレット。イベントの抽選に最適です。

すべてのデータ処理はブラウザ内でローカルに行われます。コンテンツがサーバーに送信されることはありません。