wiki-ado-convert

작성자: microsoft

VitePress/GFM 위키 마크다운을 Azure DevOps Wiki 호환 형식으로 변환합니다. Mermaid 구문을 변환하고 프론트매터를 제거하는 Node.js 빌드 스크립트를 생성합니다.

npx skills add https://github.com/microsoft/skills --skill wiki-ado-convert

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

IssueVitePress/GFMADO WikiFix
Mermaid code fences```mermaid ... ```::: mermaid ... :::Convert opening/closing fences
flowchart keywordflowchart TDgraph TDReplace flowchart with graph (preserve direction)
<br> in Mermaid labelsNode[Label<br>Text]Not supportedStrip <br> variants (replace with space)
Long arrows ---->A ---->BNot supportedReplace with -->
YAML front matter--- ... --- at file startRendered as visible raw textStrip entirely
Parent-relative source links[text](../../src/file.cs)Broken (wiki is separate)Convert to plain text
VitePress container directives::: tip / ::: warningNot supportedConvert to ADO alert blockquotes > [!TIP] / > [!WARNING]

MODERATE — May Not Render Optimally

IssueNotes
Mermaid style directivesADO'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 linkingLinks 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.

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: ```:::
  • flowchartgraph (preserve direction: TD, LR, TB, RL, BT)
  • Strip <br>, <br/>, <br /> (replace with space)
  • Replace long arrows (----> 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');
}

3. Convert Parent-Relative Source Links

Convert [text](../path) to plain text. Preserves same-directory .md links and external URLs.

function convertSourceLinks(content) {
  return content.replace(
    /\[([^\]]*)\]\(\.\.\/[^)]*\)/g,
    (match, linkText) => linkText
  );
}

4. Convert VitePress Container Directives (Optional)

Convert ::: tip / ::: warning / ::: danger to ADO alert blockquotes:

function convertContainerDirectives(content) {
  // ::: tip → > [!TIP]
  // ::: warning → > [!WARNING]
  // ::: danger → > [!CAUTION]
  // ::: info → > [!NOTE]
  // closing ::: → (blank line)
}

Script Main Flow

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
}

Skip Directories

The script should skip: node_modules, .vitepress, .git, dist, build, out, target, and any non-documentation directories.

npm Script Integration

{
  "scripts": {
    "build:ado": "node scripts/build-ado-wiki.js"
  }
}

Verification Checklist

After the script runs, verify:

  1. File count in dist/ado-wiki/ matches source (minus skipped dirs)
  2. Zero ```mermaid fences remaining — all converted to ::: mermaid
  3. Zero flowchart keywords remaining — all converted to graph
  4. No YAML front matter in output files
  5. Parent-relative links converted to plain text
  6. Same-directory .md links preserved
  7. Directory structure preserved
  8. Non-markdown files (images, etc.) copied as-is
  9. index.md at root is a proper wiki home page (NOT a placeholder)

Index Page Generation (CRITICAL)

The ADO Wiki's index.md MUST be a proper wiki landing page, NOT a generic placeholder with "TODO" text.

Logic

  1. If VitePress source has index.md: Transform it (strip front matter, strip VitePress hero/features blocks). If meaningful content remains, use it.
  2. If no meaningful content remains (empty after stripping, or only VitePress hero markup): Generate a proper landing page with:
    • Project title as # heading
    • Overview paragraph (from README or wiki overview page)
    • Quick Navigation table (Section, Description columns linking to wiki sections)
    • Links to onboarding guides if they exist
  3. NEVER leave a placeholder — if index.md contains "TODO:", "Give a short introduction", or similar placeholder text, replace it entirely

ADO Wiki .order Files

Generate .order files in each directory to control sidebar ordering:

  • Onboarding guides first, then numbered sections
  • List page names without .md extension, one per line

Citation & Diagram Preservation

The converted ADO wiki must maintain the same quality standards:

  • Linked citations ([file:line](URL)) are standard markdown — preserve them as-is
  • <!-- Sources: ... --> comment blocks after Mermaid diagrams — preserve (HTML comments work in ADO)
  • Tables with "Source" columns — preserve as-is (standard markdown tables)
  • Mermaid diagrams — convert fences only; diagram content, types, and structure are preserved
  • All Mermaid diagram types supported by ADO (graph, sequenceDiagram, classDiagram, stateDiagram, erDiagram, etc.) pass through unchanged

Important Notes

  • Source files are NEVER modified — only copies in dist/ado-wiki/
  • Images must be copied too — if source has images, copy them with same relative paths
  • The script should work with any VitePress wiki, not just this specific one
  • Print statistics at the end showing count of each transformation type
  • Script uses zero external dependencies — only Node.js builtins

microsoft의 다른 스킬

oss-growth
microsoft
OSS 성장 해커 페르소나
agent-framework-azure-ai-py
microsoft
Microsoft Agent Framework Python SDK(agent-framework-azure-ai)를 사용하여 Azure AI Foundry 에이전트를 구축합니다. AzureAIAgentsProvider로 지속적 에이전트를 만들 때, 호스팅 도구(코드 인터프리터, 파일 검색, 웹 검색)를 사용할 때, MCP 서버를 통합할 때, 대화 스레드를 관리할 때, 또는 스트리밍 응답을 구현할 때 사용합니다. 함수 도구, 구조화된 출력, 다중 도구 에이전트를 다룹니다.
development
airunway-aks-setup
microsoft
Set up AI Runway on AKS — from bare cluster to running model. Covers cluster verification, controller install, GPU assessment, provider setup, and first deployment. WHEN: "setup AI Runway", "onboard AKS cluster", "install AI Runway", "airunway setup", "deploy model to AKS", "GPU inference on AKS", "KAITO setup on AKS", "run LLM on AKS", "vLLM on AKS", "set up model serving on AKS", "AI Runway controller".
devops
appinsights-instrumentation
microsoft
Azure Application Insights로 웹앱을 계측하기 위한 지침입니다. 원격 분석 패턴, SDK 설정, 구성 참조를 제공합니다. WHEN: 앱 계측 방법, App Insights SDK, 원격 분석 패턴, App Insights란 무엇인가, Application Insights 지침, 계측 예시, APM 모범 사례.
devops
applicationinsights-web-ts
microsoft
브라우저/웹 앱을 Application Insights JavaScript SDK(@microsoft/applicationinsights-web)로 계측합니다. Real User Monitoring(RUM) — 페이지 뷰, 클릭, AJAX/fetch 종속성, 예외, 사용자 지정 이벤트, 백엔드 OpenTelemetry 트레이스와 상관관계가 있는 브라우저 측 GenAI 에이전트 트레이스에 사용합니다. SDK Loader Script 및 npm 설정, 프레임워크 확장(React, React Native, Angular), Click Analytics, 텔레메트리 이니셜라이저, 브라우저에서 생성된 에이전트/도구/모델 스팬에 대한 OTel GenAI 의미론적 규칙을 다룹니다.
devops
azure-ai-anomalydetector-java
microsoft
Azure AI Anomaly Detector SDK for Java로 이상 탐지 애플리케이션을 구축하세요. 단변량/다변량 이상 탐지, 시계열 분석 또는 AI 기반 모니터링을 구현할 때 사용하세요.
development
azure-ai-language-conversations-py
microsoft
azure-ai-language-conversations Python SDK를 사용하여 대화형 언어 이해(CLU)를 구현합니다. ConversationAnalysisClient로 대화 의도와 엔터티를 분석하거나, NLP 기능을 구축하거나, 애플리케이션에 언어 이해를 통합할 때 사용합니다.
development
azure-ai-ml-py
microsoft
Azure Machine Learning SDK v2 for Python. ML 작업 영역, 작업, 모델, 데이터 세트, 컴퓨팅 및 파이프라인에 사용합니다. 트리거: "azure-ai-ml", "MLClient", "workspace", "model registry", "training jobs", "datasets".
development