wiki-ado-convert

Files (1)

• SKILL.md

SKILL.md (first lines)

# ADO Wiki Converter

Generate a Node.js build script that transforms VitePress/GFM markdown documentation into Azure DevOps Wiki-compatible format. The source files remain untouched — the script produces transformed copies in `dist/ado-wiki/`.

## Source Repository Resolution (MUST DO FIRST)

Before generating the build script, resolve the source repository context:

1. **Check for git remote**: Run `git remote get-url origin`
2. **Ask the user**: _"Is this a local-only repository, or do you have a source repository URL?"_
   - Remote URL → store as `REPO_URL`, preserve linked citations in converted output
   - Local → preserve local citations as-is
3. **Do NOT proceed** until resolved

## Why This Is Needed

Azure DevOps Wikis use a markdown dialect that differs from GFM and VitePress in several critical ways. Documentation that renders perfectly in VitePress will have broken diagrams, raw front matter, dead links, and rendering issues when published as an ADO Wiki.

## ADO Wiki Incompatibilities

### CRITICAL — Will Break Rendering

| Issue | VitePress/GFM | ADO Wiki | Fix |
|-------|--------------|----------|-----|
| Mermaid code fences | ` ```mermaid ` ... ` ``` ` | `::: mermaid` ... `:::` | Convert opening/closing fences |
| `flowchart` keyword | `flowchart TD` | `graph TD` | Replace `flowchart` with `graph` (preserve direction) |
| `<br>` in Mermaid labels | `Node[Label<br>Text]` | Not supported | Strip `<br>` variants (replace with space) |
| Long arrows `---->` | `A ---->B` | Not supported | Replace with `-->` |
| YAML front matter | `---` ... `---` at file start | Rendered as visible raw text | Strip entirely |
| Parent-relative source links | `[text](../../src/file.cs)` | Broken (wiki is separate) | Convert to plain text |
| VitePress container directives | `::: tip` / `::: warning` | Not supported | Convert to ADO alert blockquotes `> [!TIP]` / `> [!WARNING]` |

### MODERATE — May Not Render Optimally

| Issue | Notes |
|-------|-------|
| Mermaid `style` directives | ADO's Mermaid version may ignore inline styling. Leave as-is (cosmetic). |
| Mermaid thick arrows `==>` | May work. Leave as-is. |
| Mermaid dotted arrows `-.->` | May work. Leave as-is. |
| Subgraph linking | Links to/from subgraphs not supported, but nodes inside subgraphs work fine. |

### NOT AN ISSUE (Compatible As-Is)

- ✅ Standard markdown tables, blockquotes, horizontal rules
- ✅ Unicode emoji, fenced code blocks with language identifiers
- ✅ Same-directory relative links (`./other-page.md`)
- ✅ External HTTP/HTTPS links
- ✅ Bold, italic, strikethrough, inline code
- ✅ Lists (ordered, unordered, nested), headings 1-6
- ✅ Images with relative paths

## ADO Wiki Mermaid Supported Diagram Types

As of 2025:
- ✅ `sequenceDiagram`, `gantt`, `graph` (NOT `flowchart`), `classDiagram`
- ✅ `stateDiagram`, `stateDiagram-v2`, `journey`, `pie`, `erDiagram`
- ✅ `requirementDiagram`, `gitGraph`, `timeline`
- ❌ `mindmap`, `sankey`, `quadrantChart`, `xychart`, `block`

## Build Script Structure

The generated script should be a **Node.js ESM module** (`scripts/build-ado-wiki.js`) using only built-in Node.js modules (`node:fs/promises`, `node:path`, `node:url`). No external dependencies.

### Transformation Functions

#### 1. Strip YAML Front Matter

Remove `---` delimited YAML blocks at file start. ADO renders these as visible text.

```javascript
function stripFrontMatter(content) {
  if (!content.startsWith('---')) return content;
  const endIndex = content.indexOf('\n---', 3);
  if (endIndex === -1) return content;
  let rest = content.slice(endIndex + 4);
  if (rest.startsWith('\n')) rest = rest.slice(1);
  return rest;
}
```

#### 2. Convert Mermaid Blocks

Process line-by-line, tracking mermaid block state. Apply fixes ONLY inside mermaid blocks:

- Opening: ` ```mermaid ` → `::: mermaid`
- Closing: ` ``` ` → `:::`
- `flowchart` → `graph` (preserve direction: TD, LR, TB, RL, BT)
- Strip `<br>`, `<br/>`, `<br />` (replace with space)
- Replace long arrows (`---->` with 4+ dashes) with `-->`

```javascript
function convertMermaidBlocks(content) {
  const lines = content.split('\n');
  const result = [];
  let inMermaid = false;

  for (const line of lines) {
    const trimmed = line.trimEnd();

    if (!inMermaid && /^```mermaid\s*$/.test(trimmed)) {
      result.push('::: mermaid');
      inMermaid = true;
      continue;
    }

    if (inMermaid && /^```\s*$/.test(trimmed)) {
      result.push(':::');
      inMermaid = false;
      continue;
    }

    if (inMermaid) {
      let fixed = line;
      fixed = fixed.replace(/^(\s*)flowchart(\s+)/, '$1graph$2');
      fixed = fixed.replace(/<br\s*\/?>/gi, ' ');
      fixed = fixed.replace(/-{4,}>/g, '-->');
      result.push(fixed);
    } else {
      result.push(line);

From microsoft/skills, MIT.

More from microsoft/skills