Converts VitePress/GFM wiki markdown to Azure DevOps Wiki-compatible format. Generates a Node.js build script that transforms Mermaid syntax, strips front matter, fixes links, and outputs ADO-compatible copies to dist/ado-wiki/.
Converts VitePress/GFM markdown to Azure DevOps Wiki format, handling Mermaid, front matter, and links.
npx claudepluginhub linehaul-ai/linehaulai-claude-marketplaceThis skill inherits all available tools. When active, it can use any tool Claude has access to.
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/.
Before generating the build script, resolve the source repository context:
git remote get-url originREPO_URL, preserve linked citations in converted outputAzure 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.
| 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] |
| 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. |
./other-page.md)As of 2025:
sequenceDiagram, gantt, graph (NOT flowchart), classDiagramstateDiagram, stateDiagram-v2, journey, pie, erDiagramrequirementDiagram, gitGraph, timelinemindmap, sankey, quadrantChart, xychart, blockThe 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.
Remove --- delimited YAML blocks at file start. ADO renders these as visible text.
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;
}
Process line-by-line, tracking mermaid block state. Apply fixes ONLY inside mermaid blocks:
```mermaid → ::: mermaid``` → :::flowchart → graph (preserve direction: TD, LR, TB, RL, BT)<br>, <br/>, <br /> (replace with space)----> with 4+ dashes) with -->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);
}
}
return result.join('\n');
}
Convert [text](../path) to plain text. Preserves same-directory .md links and external URLs.
function convertSourceLinks(content) {
return content.replace(
/\[([^\]]*)\]\(\.\.\/[^)]*\)/g,
(match, linkText) => linkText
);
}
Convert ::: tip / ::: warning / ::: danger to ADO alert blockquotes:
function convertContainerDirectives(content) {
// ::: tip → > [!TIP]
// ::: warning → > [!WARNING]
// ::: danger → > [!CAUTION]
// ::: info → > [!NOTE]
// closing ::: → (blank line)
}
async function main() {
const files = await collectMarkdownFiles(ROOT);
const stats = { frontMatter: 0, mermaid: 0, sourceLinks: 0, containers: 0 };
for (const filePath of files) {
let content = await readFile(filePath, 'utf-8');
content = stripFrontMatter(content);
content = convertMermaidBlocks(content);
content = convertSourceLinks(content);
const outPath = join(OUTPUT, relative(ROOT, filePath));
await mkdir(dirname(outPath), { recursive: true });
await writeFile(outPath, content, 'utf-8');
}
// Print transformation statistics
}
The script should skip: node_modules, .vitepress, .git, dist, build, out, target, and any non-documentation directories.
{
"scripts": {
"build:ado": "node scripts/build-ado-wiki.js"
}
}
After the script runs, verify:
dist/ado-wiki/ matches source (minus skipped dirs)```mermaid fences remaining — all converted to ::: mermaidflowchart keywords remaining — all converted to graph.md links preservedindex.md at root is a proper wiki home page (NOT a placeholder)The ADO Wiki's index.md MUST be a proper wiki landing page, NOT a generic placeholder with "TODO" text.
index.md: Transform it (strip front matter, strip VitePress hero/features blocks). If meaningful content remains, use it.# headingindex.md contains "TODO:", "Give a short introduction", or similar placeholder text, replace it entirely.order FilesGenerate .order files in each directory to control sidebar ordering:
.md extension, one per lineThe converted ADO wiki must maintain the same quality standards:
[file:line](URL)) are standard markdown — preserve them as-is<!-- Sources: ... --> comment blocks after Mermaid diagrams — preserve (HTML comments work in ADO)dist/ado-wiki/Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.