v1.4.1

• The extension comes with the Agent Skill for AI assistants: GitHub Copilot in VS Code (1.109 or later) can use it as soon as the extension is installed, and the new command Install Agent Skill for AI... copies it into the skills folder of Claude Code (~/.claude/skills or a workspace folder's .claude/skills) or of another assistant. When an update of the extension has a newer skill, it offers to update the copies it installed. See Writing with AI.
• A step heading numbered by hand (### 3. Fetch user) whose number differs from that of an arrow linked to it (with autonumber) is reported in the Problems panel, with a quick fix that removes the number. Numbering the steps with autonumber instead of in the headings is now recommended in the README and the guide for AI agents (Agent Skill).
• Updated the bundled mermaid (12.3.0), KaTeX (0.18.10, used by mermaid for math), markdown-it (15.0.3) and DOMPurify (3.4.17) for their security fixes: slow rendering of some Markdown (a long multi-line link reference definition, or inline HTML), and bypasses of the HTML sanitizer.

Desktop app 0.3.1

• ER diagrams (erDiagram) and state diagrams (stateDiagram / stateDiagram-v2) marked with %% @link-headings are linked to the headings after them like flowcharts: each entity (by its alias, or its name) and each state (by its description, or its id; composite states included) is linked to the heading with the same text, or to the one of a %% @ref above the line defining it, for example to put the definition of each table or the description of each state beside the diagram. Hovering and clicking highlight and scroll both ways, entities and states without a heading are faded, headings without one get a "no entity" / "no state" mark. With direction LR / RL, the headings are shown below the diagram. See examples/er-diagram.md and examples/state-diagram.md.
• Wireframes: a screen mock-up written as an HTML file is put into a document like an image (![Sign-in](screens/login.html), a link alone in a paragraph at the top level, or [![Sign-in](screens/login.png)](screens/login.html) with an image GitHub shows instead), and shown in a frame with its own styles as in a browser (its text can be selected and copied, also when it is shown full screen with the button at its top right, where the space around the page is dragged, or the page with Space held, to pan it), with the number of each part (data-item="<number>"). With <!-- wireframe: link-headings --> before it, it is put beside the headings and item tables after it, and its parts are linked to the headings numbered like them (or to the heading of data-ref) and to the rows with their number in the column of the new table option item=. width=<pixels> lays the page out at a fixed width scaled to the window, and stacked puts the descriptions below it. The files of a wireframe are read from the folder of the document, again with File > Reload after they change. See examples/wireframe.md.
• Wireframes can be numbered without data-item in their HTML: item.<number>="<CSS selector>" in their options (which may span several lines) numbers the elements matching the selector, and a selector that matches nothing is noted below the wireframe. Their :root rules, @font-face and @property (e.g. of Tailwind CSS) work as in a browser. A screen of a running web app can be captured as a wireframe with the command line's capture (see Capturing screens).
• File > Export as HTML... adds the table of contents of the window to the exported page (hover its right edge), unless it is turned off in View > Settings.... It is not printed.
• Fixed local images written as HTML <img> tags (for example <img src="images/a.png" width="49%">) not showing in the window and not being embedded in exported HTML.
• Fixed the comparison with a commit in the History tab (also in exported HTML) taking a very long time on an HTML block of many comments followed by something else. Text after the end of a comment (<!-- a --> b) is no longer taken as part of it there.
• Updated the bundled mermaid (12.3.0), KaTeX (0.18.10, used by mermaid for math), markdown-it (15.0.3) and DOMPurify (3.4.17) for their security fixes: slow rendering of some Markdown (a long multi-line link reference definition, or inline HTML), and bypasses of the HTML sanitizer.

v1.4.0

• ER diagrams (erDiagram) and state diagrams (stateDiagram / stateDiagram-v2) marked with %% @link-headings are linked to the headings after them like flowcharts: each entity (by its alias, or its name) and each state (by its description, or its id; composite states included) is linked to the heading with the same text, or to the one of a %% @ref above the line defining it, for example to put the definition of each table or the description of each state beside the diagram. Hovering and clicking highlight and scroll both ways, entities and states without a heading are faded, headings without one get a "no entity" / "no state" mark, and the Problems panel, quick fixes and @ref completion work as for flowcharts. With direction LR / RL, the headings are shown below the diagram. See examples/er-diagram.md and examples/state-diagram.md.
• Wireframes: a screen mock-up written as an HTML file is put into a document like an image (![Sign-in](screens/login.html), a link alone in a paragraph at the top level, or [![Sign-in](screens/login.png)](screens/login.html) with an image GitHub shows instead), and shown in a frame with its own styles as in a browser (its text can be selected and copied, also when it is shown full screen with the button at its top right, where the space around the page is dragged, or the page with Space held, to pan it), with the number of each part (data-item="<number>"). With <!-- wireframe: link-headings --> before it, it is put beside the headings and item tables after it, and its parts are linked to the headings numbered like them (or to the heading of data-ref) and to the rows with their number in the column of the new table option item=: hovering and clicking highlight and scroll both ways, and parts, headings and rows without a counterpart are marked and reported in the Problems panel. width=<pixels> lays the page out at a fixed width scaled to the column, and stacked puts the descriptions below it. Its local style sheets and images are embedded into exported HTML. See examples/wireframe.md.
• Wireframes can be numbered without data-item in their HTML: item.<number>="<CSS selector>" in their options (which may span several lines) numbers the elements matching the selector, and a selector that matches nothing is noted below the wireframe (a warning of the command line's export, which fails with --strict). Their :root rules, @font-face and @property (e.g. of Tailwind CSS) work as in a browser.
• The command line's new capture command writes a screen of a running web app (on its development server, for example, also a single-page app that its scripts draw) as the HTML file of a wireframe: the page as headless Chrome shows it, without its scripts, with the styles that apply to it (also those added by scripts) laid out for the window it was captured in, and its images and fonts embedded. --fill, --click, --hover and --press, or a Playwright script (--script), prepare the page before it is captured, to show an error message or a dialog, and --storage-state opens it signed in. See Capturing screens.
• Fixed local images written as HTML <img> tags (for example <img src="images/a.png" width="49%">) not showing in the preview and not being embedded in exported HTML.
• Fixed the comparison with a Git revision (in the preview, exported HTML and --diff-base) taking a very long time on an HTML block of many comments followed by something else. Text after the end of a comment (<!-- a --> b) is no longer taken as part of it there.

v1.3.0

• Exported HTML has the table of contents of the preview too: hover the short lines at the right edge of the page to open the headings (h1–h3) and jump to one. It follows mdDesignDoc.toc, can be left out with --no-toc on the command line, and is not printed. The index.html of --index has none.

v1.2.0

• The margin at the top of the preview, above the box of the document header, is no longer scrolled out of view when the editor is scrolled to the top.
• The title bar of the design doc list (Show Design Docs) has the light / dark button too, and its search box takes the colors of the theme chosen with it instead of VS Code's. The search box of the exported index.html has the same colors as the one of the light theme.
• Export Design Doc as HTML exports the differences from a Git revision while the preview is compared with it (Compare Design Doc with Git Revision...), marked as in the preview. A bar at the bottom of the exported page tells the date of the revision ("Compared with the version of …", without its commit, which tells little to the readers), goes from one change to the next, and hides or shows them.
• The command line's --diff-base <rev> exports each document with its changes since the git revision <rev> (a tag, a commit or a branch); a document the revision does not have is shown as all added. The bar of the page tells the date of the revision. With --index, index.html has a column of the changes of each document (their numbers, new, or no changes).

Desktop app 0.3.0

• View > Settings... (Ctrl+,; on macOS in the app menu, ⌘,) opens the settings of the extension (mdDesignDoc.*) in the app: the theme, the diagram look, the width for the side-by-side layout, the table of contents, the heading numbers, the front matter, the text width, the sticky table headers and the highlight of table trees. A change applies at once to all the windows, and is kept for the next launch. Before, the app used the defaults of the extension.
• File > Open Recent and the screen shown when no file is open list the files opened recently (up to 10, the last one first), to open them again. The files opened from the sidebar or a link are not listed. A file no longer found is removed from the list when it is chosen, and the list can be cleared.
• File > Export as HTML... exports the differences from the commit the document is compared with in the History tab, marked as in the window, with a bar that tells the date of the commit ("Compared with the version of …", without its hash and message, which tell little to the readers), goes from one change to the next, and hides or shows them.

Desktop app 0.2.0

• View > Design Docs (Ctrl+Shift+D, ⌘⇧D) lists the design documents of the sidebar's folder (type: design_doc in their front matter) in place of the document: a table of their titles, file names, versions, products, statuses and update dates, by folder, with a search box and sortable columns. Clicking a title opens the document.
• The installers add the app to the apps that open .md and .markdown files (Open with in the Explorer and the Finder), without making it their default app.
• A file opened while the app is running opens in a new window, or brings to the front the window that shows it already. File > Close (Ctrl+W, ⌘W) closes the window, and File > Exit all the windows.
• File > Export as HTML... saves the document to a single HTML file, the same as the extension's Export Design Doc as HTML: the diagrams, the images of the document's folder embedded, and the side-by-side layout and highlighting in the browser.
• View > Sidebar (Ctrl+B, ⌘B) shows the Markdown files of the document's folder and of its subfolders as a tree, to switch between the documents. It follows the files added, deleted or renamed, and File > Open Folder... lists another folder. Whether it is shown, and its width, are kept for the next launch.
• The sidebar has a History tab, which lists the Git commits of the document and compares it with the one chosen, like the extension's Compare Design Doc with Git Revision: the blocks added, changed and deleted marked in the preview, the words changed highlighted, and a bar at the bottom to go from one change to the next. Choosing the commit again, or closing the bar, shows the document alone again. Git runs only once the tab is shown.
• The History tab also shows the branch of the document's repository: choosing another one (a local branch, or a branch of a remote, which creates a local branch that tracks it) switches the repository to it after asking, and shows the document, the files and the history of that branch. Its pull button pulls the branch when it can be fast-forwarded. When Git fails (changes not committed, diverged branches, no upstream…), a dialog tells why and the repository stays as it was.
• The top of the preview has a small margin, so that the first element (such as the box of the document header) does not touch the top edge.
• Tables of items: an HTML comment before a table (<!-- table: level=Level merge=Item,"Physical name" -->) shows two or more columns in one cell (such as the item name and the physical name), and the rows as a tree of the levels in a column, which is hidden: indented with lines, the rows with children emphasized and foldable, and the parents and children of the row under the pointer highlighted. A button at the right of the header row shows the table as it is for a while. Elsewhere, such as on GitHub, it stays a plain table.

v1.1.0

• Show Design Docs lists the design documents of the workspace (type: design_doc in their front matter) in a table of their titles, file names, versions, products, statuses and update dates, by folder, with a search box and sortable columns. Clicking a title opens its preview, and the list follows the files added, changed and deleted. The Design Docs view of the Explorer shows them as a tree of their titles, with their version and status.
• The command line's --index-design-docs lists only the design documents in index.html, and index.html has the same search box and sortable columns.
• Compare Design Doc with Git Revision... (the history button in the preview's title bar, also in its context menu) lists the commits of the document and shows its differences from the one chosen in the preview: the blocks added, changed and deleted are marked with green, blue and red bands, the words changed are highlighted in the changed blocks, and the old version of a changed diagram is shown folded below it. The bar at the bottom goes from one change to the next, and closes the comparison. The differences follow the edits of the document, saved or not. It needs Git.
• The website (日本語) on GitHub Pages introduces the extension, the app for Windows, macOS and Linux, the command line and the Agent Skill. The sample design document exported to HTML has moved to /sample/ (日本語).
• ThirdPartyNotices.txt, in the extension and the npm package, includes the licenses and copyright notices of the npm packages bundled into them (mermaid, markdown-it, DOMPurify, highlight.js and the packages they use).
• The top of the preview has a small margin, so that the first element (such as the box of the document header) does not touch the top edge.
• Tables of items: an HTML comment before a table (<!-- table: level=Level merge=Item,"Physical name" -->) shows two or more columns in one cell (such as the item name and the physical name), and the rows as a tree of the levels in a column, which is hidden: indented with lines, the rows with children emphasized and foldable, and the parents and children of the row under the pointer highlighted. Elsewhere, such as on GitHub, it stays a plain table. A button at the right of the header row shows the table as it is for a while (also in exported HTML). Options that cannot be applied are reported as warnings. The highlight can be turned off with mdDesignDoc.tableTreeHighlight (--no-table-tree-highlight on the command line). See examples/message-definition.ja.md for a sample in Japanese. The authoring guide for AI assistants and the Agent Skill tell how to write them.

Desktop app 0.1.0

• The preview is also a desktop app for Windows, macOS and Linux, to read design documents without VS Code. It opens a Markdown file from its menu, by drag and drop or from the command line, shows it like the extension's preview, and updates it when the file is saved. Links to other Markdown files open in the app, and web links in the browser. The installers are not signed yet; see the desktop app's guide for the warnings of the system on the first launch.
• The installers include the licenses and copyright notices of the npm packages bundled into the app (ThirdPartyNotices.txt) and of its Rust crates (ThirdPartyLicenses.txt).

v1.0.0

• The authoring guide for AI assistants and the usage of the command line are packaged as an Agent Skill, attached to each release: markdown-design-doc-skill.zip. Upload it to Claude, or unzip it into the skills folder of Claude Code or another assistant, and it is used when the assistant is asked to write a design document, in English or in Japanese.
• The authoring guide for AI assistants tells how to use footnotes for side notes, and folded <details> sections for content that does not need to be read every time, such as the change history.
• The command line can write a list of the exported documents with --index: index.html in the output folder, with a table for each folder of the documents' titles (linked), file names, and the version, product, status and updated of their front matter. Its title is set with --index-title.
• A sample design document exported to HTML is published on GitHub Pages (English, Japanese), to try the arrow ⇔ heading highlighting, sticky table headers and footnote popups in a browser.