Skip to content

Commit a71175c

Browse files
laurakalbagfarskid
laurakalbag
and
farskid
authored
Document export as Mermaid and update export as code page (#164)
* Update export as code page and document export as Mermaid * Fix typo Co-authored-by: Farzad Yousefzadeh <[email protected]> * Fix typo * Link to GitLab support for Mermaid * Fix broken link --------- Co-authored-by: Farzad Yousefzadeh <[email protected]>
1 parent 0035b69 commit a71175c

File tree

5 files changed

+82
-40
lines changed

5 files changed

+82
-40
lines changed

‎docs/export-as-code.mdx

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,54 @@ title: Export as code
44

55
Exporting as code is useful if you want to use your machine with [XState](xstate/intro.mdx) inside your codebase or if you want to duplicate your machine without using **Fork**.
66

7-
You can currently export your machine as JSON, JavaScript, and TypeScript code using the code panel in the right tool menu. You can also export as code from the **Export machine** dialog using the export icon button in the editor’s top bar.
7+
Every feature of your state machine will be included in the code, except for colors and annotations.
88

9-
## Export code from the code panel
9+
## Export formats
1010

11-
![Stately Studio with the export from code icon highlighted in the toolbox and the code panel open.](/export_from_code_panel.jpg)
11+
You can currently export your machine as:
1212

13-
1. Open the <Code size={18} /> **Code** panel from the right tool menu.
14-
2. Use the JSON, JavaScript, or TypeScript buttons to display the code in your preferred format in the text area.
15-
3. Use the **XState version 5 beta** toggle to toggle between code supported by XState version 4 and XState version 5 beta.
13+
- JSON code for use with XState
14+
- JavaScript code for use with XState
15+
- TypeScript code for use with XState
16+
- [Mermaid](https://mermaid.js.org) code and diagrams for use in GitHub, GitLab, and anywhere Mermaid is supported
17+
18+
:::new
19+
20+
You can now export to Mermaid code and diagrams.
21+
22+
:::
23+
24+
## How to export as code
25+
26+
You can export as code by:
27+
- Using the <Code size={18} /> **Code** panel in the right tool menu
28+
- Using the <MoreHorizontal size={18} /> menu alongside the machine name in the machines list
29+
- Using the <Upload size={18} /> export icon button in the header
30+
31+
:::studio
32+
33+
You can also [import from code](import-from-code.mdx) in any of these locations.
34+
35+
:::
36+
37+
### Export to JSON, JavaScript, or TypeScript
38+
39+
1. Use one of the options above to open the **Export to code** modal or <Code size={18} /> **Code** panel.
40+
2. Use the dropdown menu to choose from JSON, JavaScript, or TypeScript.
41+
3. Use the **XState version 5 beta** toggle to choose between code supported by XState version 4 and XState version 5 beta.
1642
4. Use the **Copy** button to copy the code to your clipboard.
1743
5. Paste into your code editor.
1844

19-
## Export code using the header export icon
20-
21-
![Stately Studio with the export icon highlighted in the top bar and the export code modal open.](/export_from_top_bar.jpg)
45+
### Export to Mermaid
2246

23-
1. Open the export **Code** modal using the <Upload size={18} /> export icon in the header.
24-
2. Use the JSON, JavaScript, or TypeScript button to copy the code in your preferred format to your clipboard.
25-
3. Use the **XState version 5 beta** toggle to toggle between code supported by XState version 4 and XState version 5 beta.
26-
4. Paste into your code editor.
47+
1. Use one of the options above to open the **Export to code** modal or <Code size={18} /> **Code** panel.
48+
2. Use the dropdown menu to choose Mermaid.
49+
3. Use the **Copy** button to copy the code to your clipboard.
50+
4. Use the **Preview** tab to preview the diagram and **Copy SVG** to copy the diagram SVG to your clipboard.
51+
5. Paste into your code or graphics editor.
2752

28-
## Export code from the machine menu
53+
:::tip
2954

30-
![Stately Studio with the export code item highlighted in the machine list’s context menu.](/export_from_machine_list.jpg)
55+
Wrap your Mermaid code in a fenced code block with the `mermaid` language identifier to [share your diagram on GitHub](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-mermaid-diagrams) and [share your diagram on GitLab](https://handbook.gitlab.com/handbook/tools-and-tips/mermaid/).
3156

32-
1. Open the machine menu by clicking the <MoreHorizontal size={18} /> ellipsis button to the right of the machine name.
33-
2. Click the <ShareIcon size={18} /> **Export code** button in the menu to open the **Export machine** dialog.
34-
3. Use the JSON, JavaScript, or TypeScript button to copy the code in your preferred format to your clipboard.
35-
4. Use the **XState version 5 beta** toggle to toggle between code supported by XState version 4 and XState version 5 beta.
36-
5. Paste into your code editor.
57+
:::

‎static/export_from_code_panel.jpg

-531 KB
Binary file not shown.

‎static/export_from_machine_list.jpg

-512 KB
Binary file not shown.

‎static/export_from_top_bar.jpg

-507 KB
Binary file not shown.

‎versioned_docs/version-5/export-as-code.mdx

Lines changed: 41 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,54 @@ title: Export as code
44

55
Exporting as code is useful if you want to use your machine with [XState](xstate.mdx) inside your codebase or if you want to duplicate your machine without using **Fork**.
66

7-
You can currently export your machine as JSON, JavaScript, and TypeScript code using the code panel in the right tool menu. You can also export as code from the **Export machine** dialog using the export icon button in the editor’s top bar.
7+
Every feature of your state machine will be included in the code, except for colors and annotations.
88

9-
## Export code from the code panel
9+
## Export formats
1010

11-
![Stately Studio with the export from code icon highlighted in the toolbox and the code panel open.](/export_from_code_panel.jpg)
11+
You can currently export your machine as:
1212

13-
1. Open the <Code size={18} /> **Code** panel from the right tool menu.
14-
2. Use the JSON, JavaScript, or TypeScript buttons to display the code in your preferred format in the text area.
15-
3. Use the **XState version 5 beta** toggle to toggle between code supported by XState version 4 and XState version 5 beta.
16-
4. Use the **Copy** button to copy the code to your clipboard.
17-
5. Paste into your code editor.
13+
- JSON code for use with XState
14+
- JavaScript code for use with XState
15+
- TypeScript code for use with XState
16+
- [Mermaid](https://mermaid.js.org) code and diagrams for use in GitHub, GitLab, and anywhere Mermaid is supported
17+
18+
:::new
19+
20+
You can now export to Mermaid code and diagrams.
21+
22+
:::
23+
24+
## How to export as code
1825

19-
## Export code using the header export icon
26+
You can export as code by:
27+
- Using the <Code size={18} /> **Code** panel in the right tool menu
28+
- Using the <MoreHorizontal size={18} /> menu alongside the machine name in the machines list
29+
- Using the <Upload size={18} /> export icon button in the header
2030

21-
![Stately Studio with the export icon highlighted in the top bar and the export code modal open.](/export_from_top_bar.jpg)
31+
:::studio
2232

23-
1. Open the export **Code** modal using the <Upload size={18} /> export icon in the header.
24-
2. Use the JSON, JavaScript, or TypeScript button to copy the code in your preferred format to your clipboard.
25-
3. Use the **XState version 5 beta** toggle to toggle between code supported by XState version 4 and XState version 5 beta.
26-
4. Paste into your code editor.
33+
You can also [import from code](import-from-code.mdx) in any of these locations.
2734

28-
## Export code from the machine menu
35+
:::
2936

30-
![Stately Studio with the export code item highlighted in the machine list’s context menu.](/export_from_machine_list.jpg)
37+
### Export to JSON, JavaScript, or TypeScript
3138

32-
1. Open the machine menu by clicking the <MoreHorizontal size={18} /> ellipsis button to the right of the machine name.
33-
2. Click the <ShareIcon size={18} /> **Export code** button in the menu to open the **Export machine** dialog.
34-
3. Use the JSON, JavaScript, or TypeScript button to copy the code in your preferred format to your clipboard.
35-
4. Use the **XState version 5 beta** toggle to toggle between code supported by XState version 4 and XState version 5 beta.
39+
1. Use one of the options above to open the **Export to code** modal or <Code size={18} /> **Code** panel.
40+
2. Use the dropdown menu to choose from JSON, JavaScript, or TypeScript.
41+
3. Use the **XState version 5 beta** toggle to choose between code supported by XState version 4 and XState version 5 beta.
42+
4. Use the **Copy** button to copy the code to your clipboard.
3643
5. Paste into your code editor.
44+
45+
### Export to Mermaid
46+
47+
1. Use one of the options above to open the **Export to code** modal or <Code size={18} /> **Code** panel.
48+
2. Use the dropdown menu to choose Mermaid.
49+
3. Use the **Copy** button to copy the code to your clipboard.
50+
4. Use the **Preview** tab to preview the diagram and **Copy SVG** to copy the diagram SVG to your clipboard.
51+
5. Paste into your code or graphics editor.
52+
53+
:::tip
54+
55+
Wrap your Mermaid code in a fenced code block with the `mermaid` language identifier to [share your diagram on GitHub](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams#creating-mermaid-diagrams) and [share your diagram on GitLab](https://handbook.gitlab.com/handbook/tools-and-tips/mermaid/).
56+
57+
:::

0 commit comments

Comments
 (0)