Skip to content

Commit 777f1bb

Browse files
authored
Merge pull request #494 from zihanKuang/doc-helm-export
Enhance Export Designs Docs: Updated Format Guide, GIF, and FAQ
2 parents 51a19a3 + 9c81ace commit 777f1bb

File tree

4 files changed

+107
-24
lines changed

4 files changed

+107
-24
lines changed
-2.68 MB
Binary file not shown.
3.65 MB
Loading
-550 KB
Binary file not shown.

content/en/kanvas/designer/export-designs/index.md

Lines changed: 107 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,52 +4,135 @@ description: >
44
How to export your designs for backup, sharing or offline use.
55
weight: 6
66
categories: [Designer]
7-
tags: [designs]
7+
tags: [designs, export]
88
aliases:
99
- /meshmap/designer/export-designs
1010
# Should this page every be relocated, please create a redirect link from the old location to the new location or backlinks like the one below will break.
1111
# https://github.com/layer5labs/meshery-extensions/tree/master/kanvas/src/components/designer/drawer/ComponentDrawerTabContent/exportModal.js
1212
---
1313

14-
This documentation guides you on how to export your Meshery designs for various purposes, including backup, offline sharing, pushing to an OCI registry, publishing on Artifact Hub, or integration with other infrastructure tools. Kanvas Designer offers multiple export options, allowing you to choose the format that suits your needs.
14+
Kanvas let's you export a design in several formats, so you can:
1515

16-
## Exporting Your Design
16+
* keep versioned backups
17+
* collaborate offline
18+
* push artifacts to OCI-compatible registries or Helm repositories
19+
* integrate designs into CI/CD or GitOps pipelines
20+
* embed interactive diagrams in documentation and blogs
1721

18-
To export your Kanvas design, follow these steps:
22+
## Export in Two Steps
1923

20-
1. **Access Export Options**: Within the Kanvas Designer, select the design you wish to export in the design drawer. Click on the export icon in the menu for the selected design.
24+
1. Open the export menu
25+
Within the [Kanvas Designer](https://playground.meshery.io/extension/meshmap), select the design you wish to export in the design drawer. Click on the export icon in the menu for the selected design.
26+
2. Pick an export format
27+
Choose the option that matches your workflow (see table below).
2128

22-
![Export Icon](./export-modal-new.png)
29+
![Export Icon](./export-modal.gif)
2330

24-
2. **Select Export Format**: The export modal will appear, offering various export formats:
31+
## Quick Reference: Export Formats
2532

26-
- **Original Source Form**: Export the design in its original source form.
27-
- **Current Design**: Obtain the design as it appears at the moment.
28-
- **Embedded Form**: Export the design for embedding into websites, blogs, or other platforms supporting HTML/CSS and JavaScript.
33+
| Format | Keeps full design metadata? | Typical uses |
34+
|---------------------------------|-----------------------------|----------------------------------------------------|
35+
| Meshery Design (YAML) || Backups, sharing, re-import into Kanvas |
36+
| Meshery Design (OCI image) || Store in Docker Hub/GHCR; registry-based versioning|
37+
| Kubernetes Manifest (YAML) | ✖ (lossy) | `kubectl apply`; raw K8s deployment |
38+
| Helm Chart (.tar.gz) | ✖ (lossy) | Helm repos, GitOps (Argo CD/Flux), Artifact Hub |
39+
| Embed Design (JS snippet) | - | Interactive diagrams in docs or dashboards |
2940

30-
## Exporting as a Design File
41+
## Detailed Format Guide
3142

32-
Exporting your design as a design file provides you with a YAML file representing the current snapshot of your design. This file can be used for offline sharing, backup, or later import.
43+
### Meshery Design (YAML)
3344

34-
## Exporting as an OCI Image
45+
Exports a complete, lossless copy of your design.
46+
This format preserves all Meshery-specific metadata, including:
3547

36-
Exporting your design as an OCI image allows you to package your design as a container image. This image can be shared, stored, or retrieved from any container registry, like Docker Hub.
48+
- Visual layout
49+
- Annotations and comments
50+
- Component grouping and configuration
3751

38-
## Exporting as a Helm Chart
52+
Use it to back up or move designs between Meshery instances. The file is saved as `<design-name>.yml`.
3953

40-
Exporting your design as a Helm chart allows you to package your Meshery design for use with Helm, making it easy to deploy and share your design as a reusable Kubernetes package.
54+
### Meshery Design (OCI Image)
4155

42-
**Lossy Export:** When exporting as a Helm chart, Meshery-specific information (such as visual arrangement, comments, and other metadata) is not included. Only the core Kubernetes resource definitions are preserved.
56+
Exports your design as an OCI-compliant container image.
57+
This format preserves all design metadata, just like the Meshery Design (YAML), but in a form suitable for container registries.
4358

44-
## Exporting as a PNG Image
59+
When to use:
4560

46-
Exporting your design as a PNG image provides you with a visual snapshot of your design. This image can be shared, embedded, or used in presentations.
61+
- Version and distribute your design via Docker Hub, GitHub Container Registry, AWS ECR, etc.
62+
- Integrate with registry-based workflows or team collaboration tools
63+
- Store designs alongside application artifacts
4764

48-
## Exporting as the Unmodified Source
65+
The exported file is named `<design-name>.tar`, and can be pushed using tools like `docker push` or `oras push`.
4966

50-
If your design was generated from a source like HelmChart, Kubernetes manifest, or a previous design file, exporting it as an unmodified source will give you the original source file.
67+
### Kubernetes Manifest (YAML) *Lossy Export*
5168

52-
## Exporting as Embedding
69+
Exports your design as raw Kubernetes YAML files, ready to apply with `kubectl`.
5370

54-
Exporting your design as an embedding allows you to integrate it into websites, blogs, or other platforms that support HTML, CSS, and JavaScript. The embedded design version offers a visually interactive representation of your design, making it easy to share with infrastructure stakeholders.
55-
[Learn more](../embedding-designs) about Embedding Designs.
71+
Best used when:
72+
- You want to deploy directly to a cluster
73+
- You're integrating with CI/CD tools that expect plain manifests
74+
- You no longer need visual layout, annotations, or design metadata
75+
76+
This format strips out Meshery-specific context and includes only standard Kubernetes resource definitions.
77+
78+
> If you want to preserve the full editable design, use **Meshery Design (YAML)** instead.
79+
80+
### Helm Chart (.tar.gz) *Lossy Export*
81+
82+
Packages your design as a standard Helm chart archive (`.tar.gz`).
83+
84+
Best used when:
85+
- You want to deploy via Helm (`helm install`)
86+
- You're working with GitOps tools like Argo CD or Flux
87+
- You plan to publish to a Helm repository or Artifact Hub
88+
89+
This format includes only Kubernetes resource definitions. Design layout, annotations, and other Meshery-specific metadata will not be included.
90+
91+
> If you want to keep your design fully editable in Meshery, use **Meshery Design (YAML)** instead.
92+
93+
### Embed Design (JavaScript Snippet)
94+
95+
Exporting your design as an embedding allows you to integrate it into websites, blogs, or other platforms that support HTML, CSS, and JavaScript.
96+
97+
The embedded design version offers a visually interactive representation of your design, making it easy to share with infrastructure stakeholders.
98+
> [Learn more](../embedding-designs) about Embedding Designs.
99+
100+
## Best Practices and Tips
101+
102+
| Need | Recommended format |
103+
|------|--------------------|
104+
| Preserve every design detail | Meshery Design (YAML) or OCI image |
105+
| One-off deployment | Kubernetes Manifest |
106+
| Share a reusable package | Helm Chart |
107+
| Show an interactive diagram | Embed Design |
108+
| Publish to Helm repo | Helm Chart (.tar.gz) |
109+
| Store in container registry | Meshery Design (OCI image) |
110+
111+
Note:
112+
1. If you plan to keep editing in Meshery, avoid lossy formats.
113+
2. A Helm `.tar.gz` can be placed in any Helm repo and installed with `helm install`.
114+
3. An OCI image can be versioned and pulled just like an application image.
115+
116+
## Frequently Asked Questions
117+
118+
**Q. Can I re-import a Helm Chart or Kubernetes manifest into Meshery for editing?**
119+
120+
You can import the resources, but design-time metadata (layout, annotations) is lost, so the graph will not reappear as originally designed.
121+
122+
**Q. What gets removed in a lossy export?**
123+
Layout coordinates, visual grouping, comments, and any Meshery-only metadata.
124+
125+
**Q. Is the Helm `.tar.gz` ready for `helm install`?**
126+
Yes. After export, run `helm install <release> <chart.tgz>` or add it to a Helm repo.
127+
128+
**Q. Should I use Helm Chart or OCI image for sharing?**
129+
Use Helm if your consumers deploy via Helm; use OCI if you rely on container registries for versioning.
130+
131+
**Q. Do I need to be logged in to export a design?**
132+
No, login is not required. You can export as a guest user.
133+
134+
**Q. Can I export someone else's published design?**
135+
Yes. Any published design can be exported, not just your own.
136+
137+
**Q. Where does the exported file go?**
138+
After export, your browser will either prompt you to choose a save location or automatically download the file to your default downloads folder.

0 commit comments

Comments
 (0)