harehare / textusm

TextUSM is Online tool for Generate a User Story Map from indented text.

TextUSM

TextUSM is a simple tool. Help you draw user story map using indented text.

Features

• Generate a Diagram from indented text
  • User Story Map
  • Business Model Canvas
  • Opportunity Canvas
  • User Persona
  • 4Ls Retrospective
  • Start, Stop, Continue Retrospective
  • KPT Retrospective
  • Mind Map
  • Empathy Map
  • Table
  • Site Map
  • Gantt Chart
  • Impact Map
  • ER Diagram
  • Kanban
  • Sequence Diagram
  • Freeform
  • Keyboard Layout
• Export a Diagram
  • SVG
  • PNG
  • TXT
  • PDF
  • DDL(only ER Diagram)
  • Markdown(only Table)

Installation

• Web
• VSCode Extension
• cli
• npm

Example

User Story Map

TextUSM
    Online tool for making user story mapping
        Press Tab to indent lines
        Press Shift + Tab to unindent lines: Online tool for Generate a User Story Mapping from indented text.

Business Model Canvas

👥 Key Partners
    Key Partners
📊 Customer Segments
    Customer Segments
🎁 Value Proposition
    Value Proposition
✅ Key Activities
    Key Activities
🚚 Channels
    Channels
💰 Revenue Streams
    Revenue Streams
🏷️ Cost Structure
    Cost Structure
💪 Key Resources
    Key Resources
💙 Customer Relationships
    Customer Relationships

Opportunity Canvas

Problems
    Problems
Solution Ideas
    Solution Ideas
Users and Customers
    Users and Customers
Solutions Today
    Solutions Today
Business Challenges
    Business Challenges
How will Users use Solution?
    How will Users use Solution?
User Metrics
    User Metrics
Adoption Strategy
    Adoption Strategy
Business Benefits and Metrics
    Business Benefits and Metrics
Budget
    Budget

4Ls Retrospective

Liked
    Liked
Learned
    Learned
Lacked
    Lacked
Longed for
    Longed for

Start, Stop, Continue Retrospective

Start
    Start
Stop
    Stop
Continue
    Continue

KPT Retrospective

Keep
    Keep
Problem
    Problem
Try
    Try

MindMap

TextUSM
    WORK QUICKLY
        Draw diagrams without leaving the keyboard.
    SAVE TIME
        Instantly visualize your ideas.
    EXPORT TO IMAGES
        Images can be exported as png or svg.
    SHARING
        Share your diagrams online with your colleagues.

Empathy Map

https://app.textusm.com/images/logo.svg
SAYS
THINKS
DOES
FEELS

Table

Column1
    Column2
    Column3
    Column4
    Column5
    Column6
    Column7
Row1
    Column1
    Column2
    Column3
    Column4
    Column5
    Column6
Row2
    Column1
    Column2
    Column3
    Column4
    Column5
    Column6

Site Map

Home
    Download
        TextUSM
        Help you draw user story map using indented text.
        WORK QUICKLY
        SAVE TIME
    Privacy Policy
        Test
    Terms
        Test
    Contacts
        [email protected]

Gantt Chart

2019-12-26 2020-02-29
    title1
        subtitle1
            2019-12-26 2019-12-31
    title2
        subtitle2
            2019-12-31 2020-01-04

Impact Map

TextUSM
    WORK QUICKLY
        Draw diagrams without leaving the keyboard.
    SAVE TIME
        Instantly visualize your ideas.
    EXPORT TO IMAGES
        Images can be exported as png or svg.
    SHARING
        Share your diagrams online with your colleagues.

ER Diagram

relations
    DiagramDetail - Diagram
    # One To Many
    User < Comment
    Diagram < Comment
    User < Diagram
    User < DiagramUser
    Diagram < DiagramUser
tables
    Diagram
        diagram_id int pk
        name varchar(255) not null
        type enum(userstorymap,mindmap)
        is_bookmark boolean default false
    DiagramDetail
        diagram_id int pk
        is_bookmark boolean default false
        is_public boolean default false
    Comment
        comment_id int pk
        comment text not null
        diagram_id int not null
        user_id int not null
    User
        user_id int pk
        name varchar(255)
    DiagramUser
        diagram_id int pk
        user_id int pk

Kanban

TODO
    task1
    task1
DOING
    task2
    task2
DONE
    task3
    task3

Sequence Diagram

participant
    object1
    object2
    object3
object1 -> object2
    Sync Message
object1 ->> object2
    Async Message
object2 --> object1
    Reply Message
o-> object1
    Found Message
object1 ->o
    Stop Message
loop
    loop message
        object1 -> object2
            Sync Message
        object1 ->> object2
            Async Message
Par
    par message1
        object2 -> object3
            Sync Message
    par message2
        object1 -> object2
            Sync Message

Keyboard Layout

r4
    Esc
    !,1
    @,2
    {sharp},3
    $,4
    %,5
    ^,6
    &,7
    *,8
    (,9
    ),0
    _,-
    =,+
    |,\\
    ~,`
r4
    Tab,,1.5u
    Q
    W
    E
    R
    T
    Y
    U
    I
    O
    P
    {,[
    },]
    Backspace,,1.5u
r3
    Control,,1.75u
    A
    S
    D
    F
    G
    H
    J
    K
    L
    :,;
    \",'
    Enter,,2.25u
r2
    Shift,,2.25u
    Z
    X
    C
    V
    B
    N
    M
    <,{comma}
    >,.
    ?,/
    Shift,,1.75u
    Fn
r1
    1.25u
    Opt
    Alt,,1.75u
    ,,7u
    Alt,,1.75u
    Opt
    1.25u

Developing

$ npm run dev

Open http://localhost:3000 and start modifying the code in /src.

Production

npm run prod

Testing

$ npm run test

---

License

MIT

textusm's Issues

CLI Business Model Canvas not wide enough

I tried generating a bmc on the CLI but I noticed that the default output width is not wide enough. 1500 would be a good standard width for bmcs.

Add Mind map

No export working

No export or download is working, in VSCODE or on the website .. 😢

What to do ?

SVG export broken

I created a simple diagram with just a few entries in a user story map and exported it to SVG. The cards get generated properly but I noticed that not all of them have text on them. Furthermore, I noticed that the description on the left side like "User Activities" was missing.

In the SVG file the contents are there but there seems to be some issue in displaying the labels correctly.

Support different colors

I tried to change the color that was added using the color selector, e.g. to "#FF0000" but it didn't work. The UI would fall back to the default color.

[vscode-extension] side perview add global zoom button

as user, I want add a global zoom button in side perview, so that i can switch 1:1 and global view.

Ability to public diagram

Dependabot couldn't find a package.json for this project

Dependabot couldn't find a package.json for this project.

Dependabot requires a package.json to evaluate your project's current JavaScript dependencies. It had expected to find one at the path: /package.json.

If this isn't a JavaScript project, or if it is a library, you may wish to disable updates for it in the .dependabot/config.yml file in this repo.

View the update logs.

Allow for partial sets of styling parameters

(Apologizes for the cryptic title of this report.)

When generating user story maps, most of the time I only need to change the background color of the cards.
Unfortunately, TextUSM chokes when supplying it with the sole b parameter, such as:

Level 1
    Level 2
        Level 3|{"b":"#EE8A8B"}
        Level 4|{"b":"#F7CAB2"}

For TextUSM to take into account the local styling, the whole set of parameters need to be supplied:

Level 1
    Level 2
        Level 3|{"b":"#EE8A8B","f":null,"o":[0,0],"s":14}
        Level 4|{"b":"#F7CAB2","f":null,"o":[0,0],"s":14}

It would be nice if only the b parameter could be supplied, because it would declutter the source file.
Cheers

Reuse source file basename for image filenames

Hi,
let me start by expressing my gratitude for your efforts into this nice project !

Using the latest released version of your VS Code extension, triggering e.g. TextUSM: Export PNG generates a file named untitled.png.
It would be nice if the basename <b> of the source file path/to/<b>.txt would be taken as the basename of the generated files -- in this case, that would be <export_dir>/<b>.png.

Cheers

Dependabot can't parse your go.mod

Dependabot couldn't parse the go.mod found at /server/go.mod.

The error Dependabot encountered was:

go: github.com/99designs/[email protected] requires
	sourcegraph.com/sourcegraph/[email protected]: unrecognized import path "sourcegraph.com/sourcegraph/appdash" (parse https://sourcegraph.com/sourcegraph/appdash?go-get=1: no go-import meta tags (meta tag localhost:3080/sourcegraph/appdash did not match import path sourcegraph.com/sourcegraph/appdash))

View the update logs.

CLI error after installation

I installed textusm using yarn: yarn global add textusm.cli

When I run the following command it get this error:

textusm -d user_story_map -i user-story-map.txt build -o build/user-story-map.png
Error: ENOENT: no such file or directory, open './js/textusm.js'
    at Object.openSync (fs.js:462:3)
    at Object.readFileSync (fs.js:364:35)
    at /home/jceb/.node_modules/textusm.cli/dist/index.js:202:25
    at step (/home/jceb/.node_modules/textusm.cli/dist/index.js:34:23)
    at Object.next (/home/jceb/.node_modules/textusm.cli/dist/index.js:15:53)
    at fulfilled (/home/jceb/.node_modules/textusm.cli/dist/index.js:6:58)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: './js/textusm.js'
}
Internal error.

The reason is the fixed import that assumes that ./js/textusm.js exists: https://github.com/harehare/textusm/blob/master/cli/index.ts#L126. The import should resolve the node_modules directory and import the file from there.

Open VSX Listing: Signing the Publisher Agreement

Thank you for being part of the Open VSX community by adding your extensions to the Open VSX Registry. Please note that the service was recently transferred to the Eclipse Foundation and urgent action on your part is needed so we can continue to list your extensions. To ensure uninterrupted service, please sign the Eclipse Publisher Agreement as soon as possible.

Regrettably, if not soon, your extensions will be delisted and will no longer appear on the site nor be available via the API. If you sign at a later date, your extensions will then be re-activated. The signing process is explained in the Wiki (steps 1 and 2).

Please also note that all extensions MUST have a license in order to be listed.

Useful links:
Eclipse Publisher Agreement
Eclipse Foundation Open VSX Registry Frequently Asked Questions (FAQ)

More details are in these recent blog posts:
https://blogs.eclipse.org/post/brian-king/open-vsx-registry-under-new-management
https://blogs.eclipse.org/post/brian-king/new-era-open-vsx-registry

Today, there’s growing momentum around open source tools and technologies that support Visual Studio (VS) Code extensions. Leading global organizations are adopting these tools and technologies. This momentum has spurred demand for a marketplace without restrictions and limitations. Thanks for joining us on this journey as we continue to build the Open VSX community.
We look forward to continued innovation from you in 2021!

[vscode-extension] export to png don't work

Hi, when i click export to png, application export to svg.
How export to png?

textusm cli fails when passing a width

Version: 0.6.9

Call: textusm -w 1024 -i x -o x.png

Result:

(node:417230) UnhandledPromiseRejectionWarning: Error: Protocol error (Emulation.setDeviceMetricsOverride): Invalid pa
rameters Failed to deserialize params.width - BINDINGS: int32 value expected at position 21
    at /home/jceb/.node_modules/textusm.cli/node_modules/puppeteer/lib/cjs/puppeteer/common/Connection.js:208:63
    at new Promise (<anonymous>)
    at CDPSession.send (/home/jceb/.node_modules/textusm.cli/node_modules/puppeteer/lib/cjs/puppeteer/common/Connectio
n.js:207:16)
    at EmulationManager.emulateViewport (/home/jceb/.node_modules/textusm.cli/node_modules/puppeteer/lib/cjs/puppeteer
/common/EmulationManager.js:20:26)
    at Page.setViewport (/home/jceb/.node_modules/textusm.cli/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:
973:58)
    at /home/jceb/.node_modules/textusm.cli/dist/index.js:217:22
    at step (/home/jceb/.node_modules/textusm.cli/dist/index.js:34:23)
    at Object.next (/home/jceb/.node_modules/textusm.cli/dist/index.js:15:53)
    at fulfilled (/home/jceb/.node_modules/textusm.cli/dist/index.js:6:58)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
(node:417230) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing
inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To t
erminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https:
//nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:417230) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise reject
ions that are not handled will terminate the Node.js process with a non-zero exit code.

[User story maps] background-color directive broken using the cli

Using textusm.cli v0.10.0.

This input document:

A | {"b":"#000000"}
    B

Produces:

Strangely enough, the VS Code extension doesn't have this problem.

Cheers

Skip Release1

We would like to skip release1.
We need to attach a 'placeholder' release1 card in order to attach release2 card.

foreground color null doesn't work anymore

Version: 0.6.9

In previous versions this simple document would lead to a card with a yellow background and a black foreground color. With the latest update this feature broke and the text isn't visible anymore.

test|{"b":"#FFF9B2","f":null,"o":[0,0],"s":14}

CLI doesn't generate custom colors

I tried using custom colors with textusm.cli like it I'd in the web version. However, the cli version didn't pick up the colors and stay with default colors. When I copy the user story map to the web version it works flawlessly.

Height of release row isn't adjusted dynamically

I added a number of usm entries and noticed that the height of the release row isn't adjusted dynamically to the number of entries in it. The following document produces an output picture that displays the yyyy entries in the release 2 row while they belong to the release 1 row.

xxxxxxxxxxx xxxxxxxxxxx
    xxxxx xxxxxxxxxxxxxx
        xxxxxxxx xxxxxxxxxxxx xx xxx xxxxxxxxxxx
        xxx xx x3x
        xxx xx xxxxxxxx
        xxxxxxx xxx xxxxxxxxx, x.x. xxx xxxxxxxx (xxx xx x/ xxxxxxxx?)
    xxxxxxx
        xxx xx xxx-xxxxx
        xxx xx xxxxxx
        xxx xx xxxx xxxxx xxx
xxxxxxxxxx xxxxxxxxxxxxxx
    xxxxx xxxxxxxxxxxxxx
        xxxxxx xxxxx xxxxxxxx (xxxxxxx)
        xxxxxx x3 xxxxxxx xxxxxxxx (xxxxxx)
        xxx xxxxxxxxx xx xxxxxxxxxxxxx xxxxx
        xxx xxxx xx xxxxxxxxxxxxx xxxxxxx
        xxxxxxxx xxx xxxxxxxxxxxxx (xxxxxxxxxxxx)
            xxx xx xxxx.xx
    xx/xx xxxxxxxxxxxxxx
        xxx xxxx-xxxxxx xxxxxx xxxxxxxx
        xxx xx xxxxxxxx xxxxx
            xxx xxxx-xxxxxx xxxxxx xxxxxxxx
    xxxxx xxxxx xxxxxxxx
        xxxxxxxxxx xxxxxx xxxxxxx xxxxxxx
        xxxxxxxxxx xxxxxx xxxxxxxxxx xxxxxxxx
        xxxxxxxxxx xxxxxx xxx
        xxxxxxx xxxxx-xx xxxxxxxxxxx
        xxx xxxxx-xx
xxxxxxxx
    xxxx
        xxxxxxxxx xxxxxxx
        xxxxxxxxx xxxxxxxxx
        xxxxxxxxx xxxxxxx
        xxxxxxxxx xxxxx
    xxxxxxx xxxxxxxxxx
        xxxxxx xxxx xxxx
        xxxxxx xx
        xxxx xxxxxxxxxxxx
        xxxxxxx xxxxxxxx
        xxxxxxxx xxxxx
        yyyyy yyyy yyyyy
        yyyyyyyy yyyyy
        yyyyyyy yyyyyy yyyyyyy yy yyy yyyyyyy yyy
    xxxxxxx xxxx
        xxxxxxxx
        xxxx xxxxxxxxxx
        xxxxxx xxxxxxxxxx
        xxxxxx xxxxxxxxxx
        xxxx xxxxxxxxxx xxxxxxx
    xxx xxxxxxx xxx
        xxxxxxxxxxxx xxxx xxxxx2/xxxx xx xxxxxxxxx
        xxxxxxx xxxxxx xx xxxxxxx xxx xxxx
    xxx xxxxx
xxxxxxx
    xxx:xxx
        xxxxxxxx xxx:xxx xxxx
        xxxxx xxx xxxxxxxx xx xxxxx-xx
        xxxxxxx xxx:xxx xxxxxxxxxxxxx xx xxx xxxxxx
            xxxxxxx .xxxx-xxxxx xxxxxxxxxxxxx xxx xxxxxxxxx'x xxx-xxxxxx
    xxxxxxx
        xxx xxx xx xxxxxxxx xxxxx-xx xxxxxxxx xxxxxxxx
        xxxxxxxxx xxxxxxx xx xxxxx-xx xxxxxxxxx
    xxxx xxxxxxxxxx xxx
        xxxxxxxxxxxx xxxxxxxx
        xxxxxxx xxxxxx xxxxxxxx
        xxxxxxx xxxxxxxx xxxxxxxx
        xxxxxxxx xxxxx xxxxxxxx
    xxxxxxx xxxx xxx
        xxxx xxx xxxxxxxxxxx
        xxxx xxxxxxxxxx
        xxxxxx xxxxxxxxxx
        xxxxxx xxxxxxxxxx
        xxx xxxxxxxxxx xxxxxxx
    xxx xxxxx xxx
        [xxxxxxxxxx]
            xxxx

Your .dependabot/config.yml contained invalid details

Dependabot encountered the following error when parsing your .dependabot/config.yml:

Automerging is not enabled for this account. You can enable it from the [account settings](https://app.dependabot.com/accounts/harehare/settings) screen in your Dependabot dashboard.

Please update the config file to conform with Dependabot's specification using our docs and online validator.

Changing "release level" in a User Story Map

Hi, how I can I change the release of a story ?

Thanks for developing this tools. It has been very helpful.

Dependabot can't resolve your Go dependency files

Dependabot can't resolve your Go dependency files.

As a result, Dependabot couldn't update your dependencies.

The error Dependabot encountered was:

rsc.io/quote/[email protected]: unrecognized import path "rsc.io/quote/v3" (parse https://rsc.io/quote/v3?go-get=1: no go-import meta tags ())

If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.

View the update logs.

Add Empathy Map

Add impact map

Hi Hare, could you please add Impact Maps ?
(https://www.impactmapping.org/)
It's type of mind map

Gantt diagram not working as the dates should be separated by spaces and not comas

Awesome extension! Thanks for building it!

I'm having issues with the Gantt diagram displaying the example template on my MacOS 10.15.7. I look into it carefully and I think the issue is with the format of the example template.

I believe the comas in this template are breaking the opening of the Gantt diagram. Changing from comas to spaces seems to fix it.

I am no developer, but I think I've tracked down the problem to this line:

textusm/extension/vscode/src/extension.ts

Line 161 in d7fe855

"2019-12-26,2020-01-31\n title1\n subtitle1\n 2019-12-26, 2019-12-31\n title2\n subtitle2\n 2019-12-31, 2020-01-04\n",

Additionally it opens the template twice. No idea why.

Thanks again,

Michael

Allow to specify arbitrary colors

Using the latest version of the TextUSM extension for VS Code on Ubuntu 20.04.

Unless I'm misunderstood, specifying arbitrary colors isn't currently supported.
For instance,

Level 1
    Level 2
        Level 3|{"b":"#EE8A8B","f":null,"o":[0,0],"s":14}
        Level 4|{"b":"#F7CAB2","f":null,"o":[0,0],"s":14}

works, because #EE8A8B and #F7CAB2 belong to the set of acceptable colors, but

Level 1
    Level 2
        Level 3|{"b":"#00008B","f":null,"o":[0,0],"s":14}
        Level 4|{"b":"#00CA00","f":null,"o":[0,0],"s":14}

doesn't work and causes TextUSM to fall back to the default color.

Allowing to specify arbitrary colors beyond the predefined ones would be much useful.

[User Story Map] Add title for the diagram.

as Product Manager, I want notion the User Description as title of diagram so that who read the diagram know what talk about.

Can't open mind map

Text is not displayed when opening mind map.

Error: Error: failed to find element matching selector "#usm"

If I use the cli in WSL2, everything works as expected, if I use the command in Windows, I get the error

Error: Error: failed to find element matching selector "#usm"
at CdpElementHandle.$eval (C:\Users\User1\AppData\Roaming\npm\node_modules\textusm.cli\node_modules\puppeteer-core\lib\cjs\puppeteer\api\ElementHandle.js:423:27)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async CdpFrame.$eval (C:\Users\User1\AppData\Roaming\npm\node_modules\textusm.cli\node_modules\puppeteer-core\lib\cjs\puppeteer\api\Frame.js:414:20)
at async CdpPage.$eval (C:\Users\User1\AppData\Roaming\npm\node_modules\textusm.cli\node_modules\puppeteer-core\lib\cjs\puppeteer\api\Page.js:420:20)
at async C:\Users\User1\AppData\Roaming\npm\node_modules\textusm.cli\dist\index.js:281:19
Internal error.

What could be the problem?

duplicate graphic on your description page

On your main page with the examples, your SITE MAP section has the wrong (duplicate) graphic below it.

TextUSM cli: configuration data has no effect on the output

Using latest textusm.cli on Ubuntu 20.04.
Given this sample source file test.txt

A
    B
        D
        F
    C
        E

running textusm -c config.json -o test.png -d user_story_map < test.txt renders the same output, no matter the contents of the config.json file.

I tried with the only two sets configurations that I could find, namely

• the one from https://www.npmjs.com/package/textusm.cli
• the one from https://www.npmjs.com/package/textusm -- with fixed contents (see #947)

The resulting file is exactly the same, no matter what is specified in config.json.
This problem is quite blocking for me.

Unreliable output generation with CLI

I have a fairly large user story map with 160 entries in 21 user tasks. So I set a custom width and height to make it all visible. However, I noticed that the output picture varies in size. Maybe every third-to-fifth time I run the command to generate the output it falls back to the 1024x1024 size. This is also noticeable in the time it takes to run the command - when it fails it's twice as fast. It feels like an event is fired too early. However, no error message is displayed:

…/architecture on  master:origin/master [?]
↳ time textusm -w $(($(grep -e '^    [^ ]' user-story-map.txt|wc -l) * 156 + 160)) -H 3000 -d user_story_map -i user-story
-map.txt -o build/user-story-map.png

________________________________________________________
Executed in    1.80 secs   fish           external
   usr time  962.77 millis  537.00 micros  962.23 millis
   sys time  340.41 millis  184.00 micros  340.22 millis


…/architecture on  master:origin/master [?]
↳ time textusm -w $(($(grep -e '^    [^ ]' user-story-map.txt|wc -l) * 156 + 160)) -H 3000 -d user_story_map -i user-story
-map.txt -o build/user-story-map.png

________________________________________________________
Executed in    1.13 secs   fish           external
   usr time  530.15 millis  673.00 micros  529.48 millis
   sys time  311.40 millis  234.00 micros  311.17 millis

Infinitely growing memory usage when attaching to headless Chrome session

Using latest release on Ubuntu 21.04.

As mentionned in #953, when attaching to a running headless Chrome, each invocation of Textusm increases the number of chrome subprocess (ultimately exhausting my machine's virtual memory).

Add Minimap

Example configuration file is invalid

The example configuration file provided on https://www.npmjs.com/package/textusm is invalid.
Here's the provided json:

{
    font: "Open Sans",
    size: {
      width: 140,
      height: 65
    },
    backgroundColor: "#F5F5F6",
    color: {
      activity: {
        color: "#FFFFFF",
        backgroundColor: "#266B9A"
      },
      task: {
        color: "#FFFFFF",
        backgroundColor: "#3E9BCD"
      },
      story: {
        color: "#000000",
        backgroundColor: "#FFFFFF"
      },
      comment: {
        color: "#000000",
        backgroundColor: "#F1B090"
      },
      line: "#434343",
      label: "#8C9FAE",
      text: "#111111"
    }
  }
}

First, there's an extra } at the bottom.
Second, the property keys should be double-quoted.
The corrected version would be

{
    "font": "Open Sans",
    "size": {
      "width": 140,
      "height": 65
    },
    "backgroundColor": "#F5F5F6",
    "color": {
      "activity": {
        "color": "#FFFFFF",
        "backgroundColor": "#266B9A"
      },
      "task": {
        "color": "#FFFFFF",
        "backgroundColor": "#3E9BCD"
      },
      "story": {
        "color": "#000000",
        "backgroundColor": "#FFFFFF"
      },
      "comment": {
        "color": "#000000",
        "backgroundColor": "#F1B090"
      },
      "line": "#434343",
      "label": "#8C9FAE",
      "text": "#111111"
    }
}

[vscode-extension] Editing on preview don't work

Use extension for vscode, preview work, but editing don't.
Any change reset to default view.
Any recommedation or it's a bug?

Test in

Version: 1.81.0-insider (user setup)
Commit: 2f1013a310bbd74410e74fad99497841edad0eda
Date: 2023-07-13T05:33:32.822Z
Electron: 22.3.14
ElectronBuildId: 21893604
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.22621

or

Version: 1.79.2 (system setup)
Commit: 695af097c7bd098fbf017ce3ac85e09bbc5dda06
Date: 2023-06-14T08:57:04.379Z
Electron: 22.5.7
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.22621

VSCode extension works once and then you need to restart the editor to use it again

Thanks again for the tool. Here is a bug I've found.

Steps to reproduce:

1- In VSCode, use Open Preview or New Diagram, choose a diagram and complete process.
2- Try to use again and you can't select a diagram in the dropdown.

Versions:
MacOS 10.14.6
VSCode 1.53.2
TextUSM extension 0.6.73

Workaround: Relaunch VSCode and all works again

[User story maps] Document that a single `|` produces an empty card

I don't know whether it's an inadvertent behaviour or it's by design, but I discovered that when given a line containing a single |, TextUSM generates an empty card in user story maps.

I find the result more pleasant than when using e.g. a . as a fake title -- as I think you demonstrated somewhere in your examples.
I think it's not documented anywhere, so I'm hereby suggesting to mention it in the docs.

Cheers

TextUSM cli: ability to attach to a running headless chrome

With the latest version of textusm, producing a single image takes ~7,5 seconds on my machine (Ubuntu 20.04):

time textusm --configFile config.json -o test.png -d user_story_map  < test.md 

real    0m7,476s
user    0m2,344s
sys     0m0,823s

This is quite long for my needs, which are to 1) generate maps on the fly when the source files are modified, and 2) share the maps with my coworkers so that we can have fruitful discussions around them and modify the source files as we are discussing.

Now, I'm afraid I can't be of much help with TextUSM's code itself, but I noticed that when installing TextUSM cli, one of its dependencies is chrome, so I'm assuming that TextUSM cli leverages a running headless instance of Chrome to produce its results.

If this assumption is correct, then I'm suggesting that TextUSM cli affers the ability to attach to an already running instance of Chrome.
The required steps for the user would be

1. Run Chrome in headless mode using e.g.

   chrome --remote-debugging-port=9222 --headless

2. When a source file map.txt is modified, run textusm and provide it with the usl of the running chrome instance, like

   textusm --cdp http://127.0.0.1:9222 --configFile config.json -o out.png -d user_story_map  < map.txt

(the suggested command-line semantics is borrowed from Ferret -- see section "Browser mode" in https://www.montferret.dev/docs/getting-started).

This added capability should allow to considerably reduce the generation times.

Backticks crash textusm

I created the following document and it generates an error:

Action
    Task `task`

textusm -w 10024 -d user_story_map -i user-story-map.txt install build -o build/user-story-map.png
Error: Error: failed to find element matching selector "#usm"
    at ElementHandle.$eval (/home/jceb/.node_modules/textusm.cli/node_modules/puppeteer/lib/cjs/puppeteer/common/JSHandle.js:649:19)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
Internal error.

Add cards.width and card.height options to VSCode extension

Hi hare, could you add cards.width and card.height options to VSCode extension?
We use VSCode live share extension to share and edit document each other.
We often writes a long sentence and it overflow a card.

Dependabot can't parse your go.mod

Dependabot couldn't parse the go.mod found at /server/go.mod.

The error Dependabot encountered was:

go: cloud.google.com/[email protected] requires
	honnef.co/go/[email protected] requires
	github.com/rogpeppe/[email protected] requires
	gopkg.in/[email protected]: reading gopkg.in/errgo.v2/go.mod at revision v2.1.0: git fetch -f origin refs/heads/*:refs/heads/* refs/tags/*:refs/tags/* in /opt/go/gopath/pkg/mod/cache/vcs/c0f327cd4dd133603590e688dc30587a52391afc7436996e10bee6738185a38e: exit status 128:
	error: RPC failed; HTTP 502 curl 22 The requested URL returned error: 502 Bad Gateway
	fatal: The remote end hung up unexpectedly

View the update logs.

[VS Code] Not working for me.

I just discovered this extension in VS Code. I also found the online version where (at least the story map) works great.

However, I can't get the extension to run in VS Code with a preview.

• Which file extensions do I have to specify for which diagram type?

• The commands with TextUSM: * are not displayed to me.

  • I have 99% of the default key bindings.
  • Is [Ctrl + R] the correct key combination to get these commands?

(- Is there a way to integrate TextUSM into other programs?)

P.S. The website has good features and I would like to customize some of them to my needs.

er-diagram `Table1|213|347` invalid

relations
    # one to one
    Table1 - Table2
    # one to many
    Table1 < Table3
tables
    Table1|213|347
        id int pk auto_increment
        name varchar(255) unique
        rate float null
        value double not null
        values enum(value1,value2) not null
    Table2|553|619
        id int pk auto_increment
        name double unique
    Table3
        id int pk auto_increment
        name varchar(255) index

npm version is out-dated

It is still v0.12.1

Now, in github, the latest version is v0.14.5

Would update the latest version to npm?

elm core blob error

Hi all,

is is possible to embed this o one's webiste?

i'm getting an weird elm error when trying to run the example code from https://www.npmjs.com/package/textusm

can anyone help me?

Regards,c.