Ui-spec-md NPM

UI Spec MD is the efficient markdown compiler for Application screen documentation with UI Flows Graph. UI Spec MD compiles special markdown with following features

YAML header consists of the title and screen capture image path
Github-flavored Markdown
UI Flows code blocks

Document

https://ui-spec-md.netlify.com/

Example

UI Flow codeblock

When you make app screen documentation, you may need to have UI Flows Graph

UI Spec MD arrows to contain special code blocks to draw UI Flows with markdown friendly easy syntax. Here is a markdown example with the code block for UI Flows.

---
title: doc title
screen: ./screen1.png?highlight=[[216,193,150,70],[720,140,130,50]]
---

Write docs with markdown.
You can also contain uiflow code block.

```uiflows
[What the user sees]
What they do
==> What the user sees 2

[What the user sees 2]
What they do A
==> What the user sees 3
What they do B
==> What the user sees 4
```

| awesome | table |
| ---     | ---   |
| data    | data  |

Compile MD to HTML with cli

ui-spec-md options

Generate spec files from markdown

Commands: ui-spec-md dev-template-server options Serve server for developing templates. ui-spec-md edit-server options Serve editable server to edit spec markdown. ui-spec-md generate options Generate spec files from markdown default ui-spec-md theme-init dirName Copy theme directory to working directory.

Options: --help Show help boolean --version Show version number boolean -m, --mdDir Path of the source(markdown) directory string -d, --destDir Path of directory to write out converted html string -t, --themeDir Path of theme directory that include template files string

package.json scripts examples

  "scripts": {
    "generate": "ui-spec-md generate -m md -d dist/public -t theme/standard",
    "edit-server": "ui-spec-md edit-server -m md -d dist/edit",
  },