Product features: interactive HTML report scripts (ECharts / Mermaid / Leaflet)

In user language: when the assistant writes a previewable HTML report in chat, which platform scripts to use for charts, org/process diagrams, and maps; how to import sample skills; how to tell they were used correctly.

Retrieval points: ECharts, Mermaid, Leaflet, org chart, store map, department-level charts, no CDN, platform allow-list, HTML preview.

---

What you can do

When you ask a work agent in Messages for previewable HTML, the platform already hosts three script sets (do not hang a public CDN):

• A simple PNG preview can still use the in-chat data chart (chart) tool; for interactive, leader lines, or a zoomable map, use HTML + platform scripts above.
• Do not dump a whole charting library into a file, and do not use cdn.jsdelivr.net / unpkg — the preview environment strips unregistered scripts.

---

What each script set is for

ECharts (charts)

• Fits: department × level comparison, share pies (with leader labels).
• Delivery should be previewable HTML; source should contain the platform ECharts path (see skill templates).
• Do not Python-plot then embed PNG as a stand-in for an “interactive report” (unless you only want a static image).

Mermaid (structure / process)

• Fits: org trees, reporting lines, simple flowcharts.
• You want a tree diagram, not a plain “org levels” table. If preview is only a table with no tree, the skill was not used or Mermaid was not cited — see “How to tell they were used correctly”.
• In chat you can /组织架构示意图 (after importing the sample skill) and say “redo with Mermaid”.

Leaflet (maps)

• Fits: store / site geographic distribution; markers clickable for name and address.
• The library itself has no basemap. Mainland default is Amap-style tiles (OpenStreetMap official tiles often time out as gray blocks on the mainland); overseas networks can switch OSM from the map top-right.
• Pins in common WGS84; the template applies an offset when overlaying a mainland basemap. For formal commercial use, switch to an applied-key Tianditu / Amap or similar compliant service.
• Do not pull in a full Google / Baidu Maps web SDK; change only the tile URL.

---

How to get started (recommended)

1. In Skills Center New ▾ → Import skill pack, import sample zips as needed (repo examples/html-vendor-skills/dist/):

- Department-level charts → ECharts - Store map → Leaflet - Org-structure diagram → Mermaid

1. In Messages select a work agent (do not use the help agent for business reports).
2. Type / and pick the matching skill, then attach data or fetch conditions; more reliable than only “make a chart”.
3. Open preview: you should see a chart / tree / map; for a large view use Fullscreen on the bubble (in-page overlay; conversation scroll stays when you return).

Sample skills and writing highlights also: How to write workspace skills §8.7.

---

How to tell they were used correctly

If org-type HTML is only a table with no Mermaid, preview may show a yellow bar: type /组织架构示意图 and redo with Mermaid.

---

Relation to skills

• These three script sets are platform capability; you can cite them in HTML without importing a skill (the assistant must write the path correctly per the guide).
• Importing a skill freezes layout, trigger phrasing, and steps so chat recalls more easily and stays consistent.
• If the agent enabled “Only the resources above”, tick the imported sample skills under Available data and skills. See Skills and agents.

---

Related docs

• How to write workspace skills — §8.7 templates and trigger-note examples
• What belongs in a skill (allow-list) — no CDN, minimum viable pack
• Skills and agents — import a skill pack, type / to pick a skill in chat
• Messages, conversations, and attachments — preview and attachments
• Workspace apps — freeze a skill report into an app