Skip to content

[Feat]: As a first-time user, I want a guided walkthrough so that I can create and export my first Wardley Map within minutes #64

Description

@emaarco

Depends on: #63 (Command Palette operations — shared Wardley category create command + new wardley.exportSvg command).

Summary

As a first-time user, I want a single VS Code walkthrough (contributes.walkthroughs) that takes
me from a freshly-installed extension to my first exported Wardley Map, following the
official walkthrough UX guidelines.

Motivation

The extension contributes no walkthrough, so after install there is no in-editor onboarding: a
new user must already know the file extensions, the two custom editors, and the canvas toolbar. A
focused walkthrough on VS Code's Get Started page shortens time-to-first-map and teaches the
graphical ↔ OWM-DSL round-trip and export. Per the guidelines, this should be one walkthrough
with a small number of steps, each with a verb action button and theme-aware SVG media.

Proposed Solution

Add one walkthrough — id: wardley.gettingStarted, title "Get Started with Wardley Maps"
with 3 focused steps. Each step has a single verb action button, theme-aware SVG media
(apps/vscode/media/walkthroughs/*.svg, using VS Code Theme Colors so it renders in light & dark,
with altText), and a realistic completionEvents:

  1. Create your first map — description links
    [Create Example Map](command:wardley.newMapFromExample) (opens the Tea Shop example — an ideal
    first artifact). completionEvents: ["onCommand:wardley.newMapFromExample"].
    Dependency: this is the "create a model" command from Issue A ([Feat]: As a VS Code user, I want the extension's core operations in the Command Palette so that I can create and export maps without digging through menus #63). It already exists today
    (wardley.newMapFromExample), so the step is not blocked; Issue A ([Feat]: As a VS Code user, I want the extension's core operations in the Command Palette so that I can create and export maps without digging through menus #63) canonicalizes its
    category/title.
  2. Edit visually — and in text — explain the lossless graphical ↔ OWM-DSL round-trip; button
    [Browse Wardley Commands](command:workbench.action.quickOpen?%5B%22%3EWardley%20%22%5D) prefills
    the palette with >Wardley to reveal the command surface from Issue A ([Feat]: As a VS Code user, I want the extension's core operations in the Command Palette so that I can create and export maps without digging through menus #63).
    completionEvents: ["onCommand:workbench.action.quickOpen"].
  3. Export to share — button [Export as SVG](command:wardley.exportSvg) to export the map for
    sharing/embedding. completionEvents: ["onCommand:wardley.exportSvg"].
    Dependency: requires the new wardley.exportSvg command from Issue A ([Feat]: As a VS Code user, I want the extension's core operations in the Command Palette so that I can create and export maps without digging through menus #63) → this step is
    blocked by Issue A ([Feat]: As a VS Code user, I want the extension's core operations in the Command Palette so that I can create and export maps without digging through menus #63).

Acceptance Criteria

Alternatives Considered

  • Multiple walkthroughs (e.g. "basics" + "advanced"). Rejected per the guideline "don't add
    multiple walkthroughs unless absolutely necessary".
  • README-only getting-started section. Useful, but not surfaced in-editor on first run; the
    walkthrough is the native onboarding surface.
  • Screenshot PNG media. Rejected: not theme-aware.

Note: uses enhancement + documentation (the repo's docs label); no workspace/scope label exists.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationenhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions