SAP Business Process Diagram Generator

Purpose

Turn a plain-language SAP business scenario into a correct, presentation-ready
process diagram. The output is a single self-contained HTML file containing:
1. A pure-CSS swimlane diagram — departments are strict columns, process steps
are rows (one card per step placed in its owning department's column). This is a
true swimlane (not a Mermaid flowchart), and it has NO external dependency, so it
renders identically on any platform / viewer.
2. A step detail table mapping each step to its SAP transaction code, movement
type / document, and stock status.
3. A short key logic & configuration notes section.

The value of this skill is the SAP domain knowledge: mapping business narrative
to the correct document flow (Txx codes + movement types + special stock +
intercompany settlement), not just drawing boxes.

When To Use

Use when the user describes an SAP process and wants it visualized — e.g.
"把这个采购到付款流程画成流程图", "generate an SAP subcontracting flow diagram",
"跨公司委托加工流程图", "STO 业务流程图", "OTC / P2P / MTO process diagram".

Workflow

Step 1 — Clarify the scenario (only if genuinely ambiguous)

Identify and confirm the essentials before drawing:
- Organizational units: company codes, plants, storage locations, and each
party's role (buyer / seller / subcontractor / vendor / customer).
- Material movement direction and whether ownership transfers (sale) or not
(subcontracting / consignment / customer-provided material 客供料).
- Process type: standard procurement (P2P), order-to-cash (OTC), production
(PP), subcontracting (委外), stock transport order (STO 跨公司/公司内),
intercompany, or a composite of these.
Only ask the user if a critical element is missing; otherwise state reasonable
assumptions in the output's notes section and proceed.

Step 2 — Map to SAP document flow

Load references/sap-reference.md to look up the correct transaction codes,
movement types, special stock indicators, and standard scenario chains. Build the
ordered list of steps: for each step determine stage → t-code → movement
type/document → stock status → business meaning.

Grep the reference for the relevant scenario, e.g.:
- grep -i "subcontract\|委外\|541\|543" references/sap-reference.md
- grep -i "STO\|641\|转储\|intercompany\|公司间" references/sap-reference.md

Step 3 — Generate the HTML deliverable

Copy assets/template.html to the working directory (default the current project
directory, name it descriptively e.g. SAP_<场景>_业务流程图.html) and fill in:
- The swimlane grid: set --cols to the number of department columns; write one
.sl-head per department in the header row; then for each step write a row with a
.sl-num and one .sl-cell per department. Put a .sl-card (with
style="--c:var(--pN)" matching that department's color) only in the column that
owns the step; use <div class="sl-cell empty"></div> elsewhere. Put the T-code in
<b>...</b> and the description after it (use <br> for line breaks).
- The step detail <table> rows.
- The key-logic notes.
Keep the CSS/structure from the template; only replace the swimlane, table rows,
title, and notes. Do NOT restructure the template.

Step 4 — Present

Present the finished HTML with the present_files tool so the user gets a live
preview, then give a concise textual summary of the stages and the core SAP logic
(movement-type chain, ownership, intercompany settlement).

Step 5 — Export to editable Office (optional)

If the user wants to edit / re-arrange the result in Word or PowerPoint, run the
bundled scripts. They re-parse the generated HTML (same structure as
assets/template.html), so no manual re-entry is needed:
- Word: python scripts/html2docx.py SAP_场景_业务流程图.html [out.docx]
→ swimlane becomes a colored-header table (step # + one column per department),
detail table and notes preserved verbatim; all text / cells are editable in
Word / WPS.
- PPT: python scripts/html2pptx.py SAP_场景_业务流程图.html [out.pptx]
→ a 16:9 deck of 4 slides (title / swimlane table / step detail table / logic
notes). In PowerPoint, select a table → Layout → Convert to Shapes to break cells
into draggable color blocks for free-form rearrangement.
- If the output path is omitted, the script writes a same-name .docx / .pptx
next to the input HTML.
- Dependencies: python-docx and python-pptx (install once in the managed venv).
Note: add_table() in python-pptx uses rows= / cols=, NOT nrows= / ncols=.

Conventions

• Chinese users by default → write labels/notes in 简体中文 unless asked otherwise.
• Match the IDE theme (light theme = light backgrounds, dark text).
• The swimlane is pure CSS with NO Mermaid and NO external CDN — keep it that way so
  the file renders identically everywhere (this also avoids Mermaid 10 whitespace
  parsing bugs on other platforms).
• Always render both the diagram AND the step table — the table carries the
  precise SAP detail that a diagram alone cannot.
• Never invent movement types; verify against references/sap-reference.md.

Resources

• references/sap-reference.md — SAP MM/PP/SD/FI transaction codes, movement
  types, special stock indicators, and standard scenario document-flow chains
  (P2P, OTC, subcontracting, STO, cross-company/intercompany). Load & grep as needed.
• assets/template.html — self-contained HTML template (pure-CSS swimlane with
  departments as columns + step table + notes) with a ready color scheme and inline
  markup rules. Copy and fill in per scenario.
• scripts/html2docx.py — export the generated HTML to an editable Word .docx.
  Usage: python scripts/html2docx.py <input.html> [out.docx].
• scripts/html2pptx.py — export the generated HTML to an editable PowerPoint
  .pptx (4 slides). Usage: python scripts/html2pptx.py <input.html> [out.pptx].