Create reviewable inline diagrams with ak:mermaidjs-v11

Use ak:mermaidjs-v11 to express flows, interactions, structures, timelines, and journeys as Mermaid v11 source. The primary artifact is declarative text that can live inline in Markdown or in a .mmd file. Rendering to SVG, PNG, or PDF is a separate step that requires compatible tooling.

Choose Mermaid for text-based diagrams

Use ak:mermaidjs-v11 when

• Documentation needs an inline flowchart, sequence, state, class, ER, Gantt, journey, architecture, or other supported Mermaid diagram.
• Reviewers should be able to inspect and diff the diagram source.
• You need a small visual whose structure matters more than custom illustration.
• You already have facts and want to map their relationships without inventing new claims.

Choose another workflow when

• You need a publish-grade SVG and PNG with controlled layout and visual styles. Use ak:tech-graph.
• You need a strategic HTML presentation. Use ak:slides.
• The underlying evidence is not ready. Gather and approve it before asking for a diagram.

Prepare the facts and rendering boundary

Provide the audience, diagram goal, verified nodes or participants, labeled relationships, preferred direction, and desired output. State whether the Skill may edit a file or should return source only.

Inline Mermaid needs no extra file renderer. Converting .mmd to an image or PDF requires Mermaid CLI (mmdc), which is not guaranteed by installing this Skill. Browser integration may use a local package or a CDN; either can create a dependency or network effect and needs separate approval.

Create a bounded diagram

/ak:mermaidjs-v11 Create an inline Mermaid v11 sequence diagram for the approved lead-review flow: marketer submits a draft, reviewer requests changes or approves, and publishing stays a separate manual action. Return Mermaid source only

/ak:mermaidjs-v11 Create an inline Mermaid v11 sequence diagram for the approved lead-review flow: marketer submits a draft, reviewer requests changes or approves, and publishing stays a separate manual action. Return Mermaid source only

$ak:mermaidjs-v11 Create an inline Mermaid v11 sequence diagram for the approved lead-review flow: marketer submits a draft, reviewer requests changes or approves, and publishing stays a separate manual action. Return Mermaid source only

The argument is a diagram type or description. File paths, rendering, theme, and integration behavior should be requested explicitly rather than inferred.

Follow the diagram stages

1. Choose the diagram type. Match the outcome to a flowchart, sequence, state, ER, class, Gantt, journey, architecture, or other supported form.
2. Extract verified structure. Identify nodes, participants, relationships, direction, labels, and any grouping from supplied evidence.
3. Write Mermaid v11 source. Use a mermaid fenced block for inline docs or a .mmd file when a standalone source is requested.
4. Configure deliberately. Add diagram frontmatter, theme, layout, or accessibility text only when required by the host and reviewed.
5. Validate. Use mermaid.parse or mmdc when the compatible tool is already available and execution is approved.
6. Render and review when requested. mmdc -i diagram.mmd -o diagram.svg determines output format from the extension. Inspect the rendered artifact for clipped labels, crossings, contrast, and factual accuracy.

Keep rendering and integration safe

Keep Mermaid's securityLevel at the host's approved setting; the bundled guidance identifies strict as the default and recommended level. Do not place secrets or private identifiers in node labels. A diagram can simplify evidence, but it must not convert inference into fact or imply that a review gate has already authorized a live action.

Verify source and outputs

Depending on the request, the output can be:

• a mermaid code block for Markdown or MDX;
• a standalone .mmd source file;
• an .svg, .png, or .pdf rendered by available mmdc; or
• integration code for an approved browser or application surface.

Check the source parses, labels match the supplied evidence, accessibility text describes the diagram, and the rendered output remains readable at its intended size. Record the exact source and rendered paths. If no renderer ran, say so; valid-looking source is not proof of a clean visual result.

Troubleshoot and understand limits

The Skill does not guarantee a host supports every Mermaid v11 feature or that an external CDN remains available. It does not publish, deploy, or edit a live site unless those separate actions are explicitly approved.

Continue with ak:tech-graph, ak:docs, or the Marketing Kit overview.