amvcp-diag-time

Generate time-axis diagrams for sequences, state machines, timelines, and Gantt schedules.

Updated May 8, 2026
One-click install
npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-diag-time
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: amvcp-diag-time
Source: https://github.com/Emasoft/ai-maestro-visual-communicator-plugin/tree/main/skills/amvcp-diag-time
Command: npx skills add https://github.com/Emasoft/ai-maestro-visual-communicator-plugin --skill amvcp-diag-time

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It helps you create clear visual diagrams when your content changes over time or across states, so readers can understand sequence, transitions, milestones, and schedules at a glance.

Core Features & Use Cases

  • Sequence diagrams (actors → messages → activations): show who calls whom, when messages happen, and which actor is actively processing.
  • State machine diagrams (states → labeled transitions → guards/self-loops): document event-driven behavior with optional guarded conditions and looping transitions.
  • Timeline and Gantt-style time visuals: place milestones on a horizontal/vertical time axis or render task bars with dependencies and a today line.

Quick Start

Use this skill to generate a diagram when you want to represent an OAuth handshake as a sequence diagram or describe a workflow as a state machine.

Frequently Asked Questions about amvcp-diag-time

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a sequence diagram with SVG for an OAuth handshake?

To generate a sequence diagram with SVG, define the actors, messages, and activations in a JSON scene-graph. This Skill renders the time-axis diagram as a themed SVG, clearly showing who calls whom and which actor is actively processing the OAuth handshake.

Can I create a state machine diagram with guarded transitions and self-loops?

Yes, you can create a state machine diagram by defining states, labeled transitions, and optional guards in the JSON scene-graph. It renders event-driven behavior as SVG, documenting self-loops and guarded conditions for state transitions.

What is the best way to render a Gantt chart with task dependencies and a today line?

The best way to render a Gantt chart is to define task bars, dependencies, and a today line in the JSON scene-graph. This Skill places milestones on a horizontal or vertical time axis and outputs themed SVG visuals for task durations.

Does this diagram generation tool require specific styling tokens for SVG output?

Yes, the diagram generation requires styling via DESIGN.md --vc-* tokens. The JSON scene-graph is rendered through co-located amvcp-diagram.js and amvcp-designmd.js renderers, ensuring selection atoms align with data-ve-id nodes and edges.

How do I model chronological milestones on a timeline using SVG?

To model chronological milestones on a timeline, structure your events in a JSON scene-graph. This Skill generates time-axis diagrams by emitting defensive JSON that renders as themed SVG, placing milestones clearly for at-a-glance understanding.

What are the limitations of using a JSON scene-graph for state machine diagrams?

The JSON scene-graph requires a specific structure for state machine diagrams, meaning selection atoms must align with data-ve-id nodes and edges. You must satisfy this required scene-graph structure and use co-located renderers for correct SVG output.