# Wikied User Guide

Wikied is a local Markdown editor that runs in your browser. It edits files directly on your machine — no cloud, no accounts.

---

## Opening a File

- Click the **filename pill** in the centre of the top bar (or press `Ctrl+P`) to open the file picker.
- When no search text is typed, the picker shows your full folder tree. Type to filter to a flat list.
- Click any Markdown file to open it.
- Use the **left panel** (toggle with the hamburger icon `☰` at the top-left) to browse and click files directly.

---

## Editing

Wikied opens files in **Rich** mode by default — a WYSIWYG Markdown editor. You can:

- Format text using the toolbar (headings, bold, italic, lists, links, tables, code blocks).
- Type raw Markdown; it renders in place.
- Press `Ctrl+S` / `Cmd+S` to save at any time.

---

## Saving

| Action | How |
|---|---|
| Save current file | `Ctrl+S` / `Cmd+S`, or click the floppy-disk icon → **Save** |
| Save all dirty files | Click the floppy-disk icon → **Save all** |
| Autosave | Enable in **Settings** (gear icon); saves 750 ms after you stop typing |

An **orange dot** beside the filename and an **Unsaved** badge in the status bar indicate unsaved changes. The floppy-disk icon shows a count badge when multiple files are dirty.

Unsaved edits are preserved in memory when you switch files and restored when you switch back.

---

## Preview Mode

Click the **Preview** button in the top-right to switch from rich editing to a rendered Markdown preview. Click **Rich** to return to editing.

When Preview is active a **Styles** button appears — choose from:

| Style | Best for |
|---|---|
| Default | General reading |
| GitHub | GitHub-flavoured rendering |
| Docs | Documentation sites |
| Print | Print-friendly layout |
| Minimal | Clean, minimal look |

Clicking a relative Markdown link in Preview mode opens that document in the editor. If the current file has unsaved changes you will be asked to save first.

---

## Diagrams

### Diagram Builder

Click the **Diagrams** tab in the app header to open the standalone diagram builder. It provides a form-driven UI for creating Mermaid diagrams (sequence, flowchart, ER, and org chart) with a live pan/zoom canvas preview.

- **Add elements** — use the toolbar buttons to add participants, messages, or blocks via modal forms.
- **Edit / reorder** — open **Edit Elements** (searchable flat list) or **Reorder** (drag-to-reorder tree) from the toolbar.
- **View / Edit Code** — toggle the raw Mermaid text and click **Apply** to push edits back to the visual model.
- **Export** — click the **Export** button to download SVG, download PNG, download a `.mmd` file, or copy the Mermaid code to the clipboard.
- **Fullscreen preview** — hover over any rendered diagram in Preview mode and click **Full screen** to open a full-viewport modal with pan/zoom and export controls.

### Inserting a Diagram into a Document

In Rich editing mode, click the **Diagram** button (DiamondPlus icon) in the editor toolbar. The diagram builder opens in-place; click **Confirm** to append a ` ```mermaid ``` ` fenced block at the cursor position.

### Importing Gliffy Diagrams

You can convert an existing Gliffy diagram to Mermaid in two places:

| Entry point | How |
|---|---|
| **Editor toolbar** | Click the **Gliffy** (upload) icon beside the Diagram button → upload a `.gliffy` file or paste JSON → review the live preview → click **Insert**. |
| **Dex toolbar** | Inside the diagram builder, click **Import Gliffy** (after the Export button) → same modal flow → click **Apply**. |

The converter supports flowchart, sequence, ER, and org chart types. Layout, colours, fonts, and swimlanes are not preserved — only shape labels and connector labels are converted.

---

## Outline Panel

Click the **outline icon** (≡) in the top-right to open the document outline. It lists all headings and lets you search them. Clicking a heading scrolls the editor to that section.

To keep the outline always visible, click the **pin icon** (📌) in the outline title bar — it docks the panel to a sidebar on the right.

---

## Recent Files

Click the **clock icon** (🕐) in the top-right to see your ten most recently opened files. Click any entry to open it. Pin the panel to keep it visible.

---

## Git Integration

If your workspace is inside a git repository, a **branch icon** appears in the top bar with a badge showing the number of changed files.

| Action | How |
|---|---|
| Commit | Click the branch icon → **Commit changes…** → enter a message → Commit |
| Push | Click the branch icon → **Push to remote** |
| Pull | Click the branch icon → **Pull latest changes** |

---

## Settings

Click the **gear icon** (⚙) in the top-right:

- **Theme** — System, Light, or Dark.
- **Autosave** — On or Off. When on, files are saved automatically 750 ms after you stop typing.

---

## Status Bar

The coloured bar at the bottom of the editor shows:

- **File path** — hover for the full path.
- **Saved / Unsaved** badge.
- Current **mode** (Rich or Preview).
- Static metadata: Markdown · UTF-8 · LF · Local only.

---

## CLI — Convert Gliffy to Markdown

The `wikied convert` subcommand converts a Gliffy file to a Markdown file containing a Mermaid code block without starting the server:

```bash
wikied convert --input diagram.gliffy --output diagram.md
```

| Flag | Description |
|---|---|
| `--input <file>` | Path to the `.gliffy` source file (required) |
| `--output <file>` | Path to write the output Markdown file (required) |
| `--help` / `-h` | Print usage and exit |

Conversion errors are written to stderr with exit code 1. Warnings about unrecognised shape types are written to stderr with exit code 0.

---

## Keyboard Shortcuts

| Shortcut | Action |
|---|---|
| `Ctrl+P` / `Cmd+P` | Open file picker |
| `Ctrl+S` / `Cmd+S` | Save current file |

---

## Starting with an Empty Workspace

If Wikied starts in an empty directory a dialog appears offering to clone a git repository by URL, or to start with an empty workspace.
