Replacing "graph" with "flowchart"

[victorp13]

📑 Summary

Since the documentation mentions "flowchart" in the example pages, it makes more sense to also show a flowchart as the first example loaded in the editor. It looks to me like "graph" was deprecated? Not 100% sure.

Resolves #653

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable:

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 🔖 targeted develop branch

[netlify]

✅ Deploy Preview for mermaidjs ready!

Name	Link
🔨 Latest commit	9853442
🔍 Latest deploy log	https://app.netlify.com/sites/mermaidjs/deploys/63e29c9fe380f10008968a0e
😎 Deploy Preview	https://deploy-preview-654--mermaidjs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[sidharthv96]

Thanks @victorp13 !
Can you also change the value here too?

mermaid-live-editor/src/lib/util/state.ts

Line 9 in 278982c

code: `graph TD

[Yash-Singh1]

The snapshot tests seem to be failing due to the changes in cypress/snapshots.js:

mermaid-live-editor/cypress/snapshots.js

Lines 4 to 25 in 4528d8c

	"1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":true,\"autoSync\":true,\"updateDiagram\":true}"
	},
	"Check Redirect from old URL": {
	"1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true}"
	},
	"should load diagram from gist": {
	"1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a\"}}}"
	},
	"should load diagram from gist revision": {
	"1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"gist\",\"config\":{\"url\":\"https://gist.github.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/ec9b4ab0e41e4ff6287326cd3cb47affd7851e19\"}}}"
	},
	"should load diagram from raw files": {
	"1": "{\"code\":\"graph TD\\n A[Party] -->|Get money| B(Go shopping!!)\\n \",\"mermaid\":\"{\\n \\\"theme\\\": \\\"forest\\\",\\n \\\"test\\\": \\\"hello world\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":true,\"loader\":{\"type\":\"files\",\"config\":{\"codeURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/code.mmd\",\"configURL\":\"https://gist.githubusercontent.com/sidharthv96/6268a23e673a533dcb198f241fd7012a/raw/4eb03887e6a41397e80bdcdbf94017c498f8f1e2/config.json\"}}}"
	}
	},
	"__version": "9.3.1",
	"Auto sync tests": {
	"should dim diagram when code is edited": {
	"1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Test\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":false,\"updateDiagram\":false}"
	},
	"should not dim diagram when code is in sync": {
	"1": "{\"code\":\"graph TD\\n A[Christmas] -->|Get money| B(Go shopping)\\n B --> C{Let me think}\\n C -->|One| D[Laptop]\\n C -->|Two| E[iPhone]\\n C -->|Three| F[fa:fa-car Car]\\n C --> Testing\",\"mermaid\":\"{\\n \\\"theme\\\": \\\"default\\\"\\n}\",\"updateEditor\":false,\"autoSync\":true,\"updateDiagram\":false}"

And in loadSite.spec.ts:

mermaid-live-editor/cypress/integration/loadSite.spec.ts

Line 81 in b5978e6

`{"code":"graph TD\\nA[\\"<img src='https://via.placeholder.com/64' width=64/>\\"]","mermaid":"{\\"securityLevel\\": \\"loose\\", \\"theme\\": \\"forest\\"}","updateEditor":true,"autoSync":true,"updateDiagram":true}`,

Could you update those too?

[sidharthv96]

Okay, so this is a valid bug when loading images

Works

graph TD
  A["<img src='https://picsum.photos/200' width=64/>"]

Does not work

flowchart TD
  A["<img src='https://picsum.photos/200' width=64/>"]

So there is compatibility difference with graph and flowchart.

This needs to be addressed in the mermaid library and is not directly linked to this PR.

@knsv @ashishjain0512 is this an intentional omission in flowchart?

[github-actions]

This pr is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 14 days