packages/website/docs/manual/getting-started.md (6)

Line range hint 1-4: Enhance the description to be more specific

Consider expanding the description to better reflect the content, for example:
"A comprehensive guide to installing, configuring, and creating your first graph with maxGraph."

🧰 Tools

🪛 LanguageTool

[style] ~64-~64: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...want to use TypeScript, adapt it if you want to use JavaScript (mainly, remove referenc...

(REP_WANT_TO_VB)

---

[uncategorized] ~112-~112: You might be missing the article “a” here.
Context: ... into your application, you should have minimal graph displayed with a rectangle connec...

(AI_EN_LECTOR_MISSING_DETERMINER_A)

---

[duplication] ~121-~121: Possible typo: you repeated a word
Context: ...nts: vertices, edges, and groups. #### Vertices Vertices are the fundamental elements of your gr...

(ENGLISH_WORD_REPEAT_RULE)

---

[duplication] ~127-~127: Possible typo: you repeated a word
Context: ...ents in an architectural diagram. #### Edges Edges are the connections in your graph that ...

(ENGLISH_WORD_REPEAT_RULE)

---

[duplication] ~134-~134: Possible typo: you repeated a word
Context: ...tionships in organization charts. #### Groups Groups in maxGraph allow you to logically orga...

(ENGLISH_WORD_REPEAT_RULE)

🪛 Markdownlint (0.35.0)

114-114: null
Images should have alternate text (alt text)

(MD045, no-alt-text)

---

208-208: null
Images should have alternate text (alt text)

(MD045, no-alt-text)

---

37-52: Enhance installation instructions with additional details

Consider adding:

• Version specification guidance (e.g., @maxgraph/core@latest vs specific versions)
• Any peer dependencies that need to be installed
• A verification step to confirm successful installation

---

67-111: Improve TypeScript code example with better practices

Consider these improvements to the code example:

1. Use more idiomatic TypeScript for type assertion:

-const container = <HTMLElement>document.getElementById('graph-container');
+const container = document.getElementById('graph-container') as HTMLElement;

2. Add null check for container:

-const container = <HTMLElement>document.getElementById('graph-container');
+const container = document.getElementById('graph-container');
+if (!container) {
+  throw new Error('Container element not found');
+}

---

121-125: Improve Key Concepts section formatting and content

1. Fix repeated headers by using different heading levels:

-#### Vertices
-Vertices are...
+#### Vertices
+These are...

2. Consider adding simple code examples for each concept to demonstrate their usage.

3. Add a table or list comparing the key properties and methods available for each concept.

Also applies to: 127-132, 134-149

🧰 Tools

🪛 LanguageTool

[duplication] ~121-~121: Possible typo: you repeated a word
Context: ...nts: vertices, edges, and groups. #### Vertices Vertices are the fundamental elements of your gr...

(ENGLISH_WORD_REPEAT_RULE)

---

176-190: Enhance event handling example with more comprehensive coverage

Consider expanding the event handling example to include:

1. More common event types (e.g., double-click, right-click)
2. Type safety for event properties
3. Error handling

Example:

// Add type safety for event properties
type ClickEventProperties = {
  cell: Cell | null;
  event: MouseEvent;
};

graph.addListener(InternalEvent.CLICK, (sender, evt) => {
  try {
    const cell = evt.getProperty<Cell>('cell');
    const mouseEvent = evt.getProperty<MouseEvent>('event');
    
    if (cell) {
      // Handle cell click
      console.log('Clicked cell:', cell);
      console.log('Mouse coordinates:', mouseEvent.clientX, mouseEvent.clientY);
    }
  } catch (error) {
    console.error('Error handling click event:', error);
  }
});

---

211-213: Expand the Help section with additional resources

Consider adding:

• Link to Stack Overflow tags
• Community chat/forum links (if available)
• Links to related documentation sections
• Common troubleshooting scenarios

Configuration used: CodeRabbit UI
Review profile: CHILL

packages/website/docs/manual/getting-started.md (6)

Line range hint 1-36: LGTM! Consider adding version compatibility information.

The header section is well-structured with clear licensing, proper attribution, and helpful warning about the WIP status. Consider adding information about which versions of maxGraph this documentation applies to.

🧰 Tools

🪛 LanguageTool

[style] ~64-~64: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...want to use TypeScript, adapt it if you want to use JavaScript (mainly, remove referenc...

(REP_WANT_TO_VB)

---

[uncategorized] ~112-~112: Possible missing article found.
Context: ... into your application, you should have minimal graph displayed with a rectangle connec...

(AI_HYDRA_LEO_MISSING_A)

---

[duplication] ~121-~121: Possible typo: you repeated a word
Context: ...nts: vertices, edges, and groups. #### Vertices Vertices are the fundamental elements of your gr...

(ENGLISH_WORD_REPEAT_RULE)

---

[duplication] ~127-~127: Possible typo: you repeated a word
Context: ...ents in an architectural diagram. #### Edges Edges are the connections in your graph that ...

(ENGLISH_WORD_REPEAT_RULE)

---

[duplication] ~134-~134: Possible typo: you repeated a word
Context: ...tionships in organization charts. #### Groups Groups in maxGraph allow you to logically orga...

(ENGLISH_WORD_REPEAT_RULE)

---

37-53: Consider enhancing installation instructions.

While the basic installation commands are clear, consider adding:

• Example package.json configuration
• List of peer dependencies (if any)
• Common troubleshooting steps
• Minimum required Node.js version

---

81-111: Consider adding error handling and type safety to the graph creation example.

The example could benefit from:

• Type annotations for the vertex and edge objects
• Error handling for failed insertions
• Comments explaining the style properties

---

121-121: Fix repeated headings in the key concepts section.

Remove the duplicate headings for better readability:

-#### Vertices
Vertices
+#### Vertices
-#### Edges
Edges
+#### Edges
-#### Groups
Groups
+#### Groups

Also applies to: 127-127, 134-134

🧰 Tools

🪛 LanguageTool

[duplication] ~121-~121: Possible typo: you repeated a word
Context: ...nts: vertices, edges, and groups. #### Vertices Vertices are the fundamental elements of your gr...

(ENGLISH_WORD_REPEAT_RULE)

---

179-189: Enhance event handling examples with type safety and error handling.

Consider adding:

• TypeScript interfaces for event properties
• Error handling in callbacks
• Examples of other common events

+interface CellEvent extends Event {
+  getProperty(key: string): any;
+}

 graph.addListener(InternalEvent.CLICK, (sender, evt) => {
-  const cell = evt.getProperty('cell');
+  try {
+    const cell = (evt as CellEvent).getProperty('cell');
     if (cell) {
       console.log('Clicked cell:', cell);
     }
+  } catch (error) {
+    console.error('Error handling cell click:', error);
+  }
 });

---

192-212: Expand the styling section with more examples.

Consider adding:

• Examples of edge styling
• Custom style definitions
• Common style properties and their effects
• Style inheritance and overrides

Configuration used: CodeRabbit UI
Review profile: CHILL

packages/website/docs/manual/getting-started.mdx (5)

1-4: Consider adding version compatibility information

Since this is a getting started guide, it would be helpful to specify the minimum supported versions of Node.js and TypeScript required to use maxGraph.

 ---
 sidebar_position: 2
 description: Getting started with maxGraph.
+requirements:
+  - Node.js >= 14.0.0
+  - TypeScript >= 3.8.0
 ---

---

41-61: Consider adding peer dependencies information

If maxGraph has any peer dependencies, it would be helpful to list them in the installation section.

---

138-144: Improve section headers to avoid word repetition

Consider revising the section headers to avoid word repetition:

-#### Vertices
-Vertices are the fundamental elements...
+#### Vertex Elements
+Vertices are the fundamental elements...

-#### Edges
-Edges are the connections...
+#### Edge Connections
+Edges are the connections...

-#### Groups
-Groups in `maxGraph`...
+#### Grouping Elements
+Groups in `maxGraph`...

Also applies to: 152-152

🧰 Tools

🪛 LanguageTool

[duplication] ~138-~138: Possible typo: you repeated a word
Context: ...nts: vertices, edges, and groups. #### Vertices Vertices are the fundamental elements of your gr...

(ENGLISH_WORD_REPEAT_RULE)

---

[duplication] ~144-~144: Possible typo: you repeated a word
Context: ...ents in an architectural diagram. #### Edges Edges are the connections in your graph that ...

(ENGLISH_WORD_REPEAT_RULE)

---

196-210: Enhance event handling examples

Consider adding more practical event handling examples such as:

• Double-click events for editing
• Context menu events
• Drag and drop events

---

214-227: Expand styling examples

Consider adding more comprehensive styling examples including:

• Edge styling
• Custom shapes
• Gradient fills
• Custom markers

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

#!/bin/bash
# Check if the image file exists
fd -t f "vertex-style.png" packages/website/docs/manual/assets/getting-started/

#!/bin/bash
# Check if the image file exists
fd -t f "first-graph.gif" packages/website/docs/manual/assets/getting-started/