### Install SVGuitar using npm, yarn, or pnpm

Source: https://context7.com/omnibrain/svguitar/llms.txt

Instructions for installing the SVGuitar library using various package managers. This is the first step to include SVGuitar in your project.

```bash
# Using npm
npm install --save svguitar

# Using yarn
yarn add svguitar

# Using pnpm
pnpm add svguitar
```

--------------------------------

### Install SVGuitar Dependency

Source: https://github.com/omnibrain/svguitar/blob/master/README.md

Commands to add the SVGuitar library to your project using common package managers.

```bash
npm install --save svguitar
yarn add svguitar
pnpm add svguitar
```

--------------------------------

### Initialize SVGuitarChord Instance

Source: https://context7.com/omnibrain/svguitar/llms.txt

Shows how to create a new SVGuitarChord instance using either a CSS selector or an HTMLElement. It also demonstrates basic chaining for configuration and drawing.

```javascript
import { SVGuitarChord } from 'svguitar'

// Using CSS selector
const chart1 = new SVGuitarChord('#my-chord-container')

// Using HTMLElement
const container = document.getElementById('chord-div')
const chart2 = new SVGuitarChord(container)

// Basic usage with chaining
chart1
  .configure({ title: 'Am' })
  .chord({
    fingers: [
      [1, 0],
      [2, 1],
      [3, 2],
      [4, 2],
      [5, 0],
      [6, 'x']
    ],
    barres: []
  })
  .draw()
```

--------------------------------

### Initialize and Draw a Guitar Chord Chart

Source: https://github.com/omnibrain/svguitar/blob/master/README.md

Demonstrates how to initialize the SVGuitarChord instance, configure chart settings, define the chord structure, and render the SVG to a container element.

```html
<div id="chart"></div>
<script src="https://omnibrain.github.io/svguitar/js/svguitar.umd.js"></script>
<script>
  var chart = new svguitar.SVGuitarChord('#chart');
  chart.configure({}).chord({}).draw();
</script>
```

```javascript
import { SVGuitarChord } from 'svguitar';
const chart = new SVGuitarChord('#chart');
chart.configure({}).chord({}).draw();
```

--------------------------------

### configure() Method

Source: https://context7.com/omnibrain/svguitar/llms.txt

Customize the appearance of the chord diagram with extensive configuration options. All settings are optional and have sensible defaults.

```APIDOC
## configure() Method

### Description
Customize the appearance of the chord diagram with extensive configuration options. All settings are optional and have sensible defaults.

### Method
`configure(options)`

### Parameters
#### Request Body
- **options** (object) - Required - An object containing configuration properties.
  - **title** (string) - Optional - The title of the chord diagram.
  - **strings** (number) - Optional - The number of strings on the guitar.
  - **frets** (number) - Optional - The number of frets to display.
  - **position** (number) - Optional - The starting fret position.
  - **orientation** (string) - Optional - 'vertical' or 'horizontal'.
  - **style** (string) - Optional - 'normal' or 'handdrawn'.
  - **tuning** (array) - Optional - Array of tuning labels.
  - **tuningsFontSize** (number) - Optional - Font size for tuning labels.
  - **tuningsColor** (string) - Optional - Color for tuning labels.
  - **fretLabelPosition** (string) - Optional - 'left' or 'right'.
  - **fretLabelFontSize** (number) - Optional - Font size for fret labels.
  - **fretLabelColor** (string) - Optional - Color for fret labels.
  - **noPosition** (boolean) - Optional - Hide fret position label.
  - **color** (string) - Optional - Global color for diagram elements.
  - **backgroundColor** (string) - Optional - Background color ('none' for transparent).
  - **titleColor** (string) - Optional - Color for the title.
  - **stringColor** (string) - Optional - Color for the strings.
  - **fretColor** (string) - Optional - Color for the frets.
  - **fingerSize** (number) - Optional - Size of the finger markers.
  - **fingerColor** (string) - Optional - Color of the finger markers.
  - **fingerTextColor** (string) - Optional - Text color for finger labels.
  - **fingerTextSize** (number) - Optional - Font size for finger labels.
  - **fingerStrokeColor** (string) - Optional - Stroke color for finger markers.
  - **fingerStrokeWidth** (number) - Optional - Stroke width for finger markers.
  - **barreChordStyle** (string) - Optional - 'rectangle' or 'arc'.
  - **barreChordRadius** (number) - Optional - Radius for barre chord arcs.
  - **barreChordStrokeColor** (string) - Optional - Stroke color for barre chords.
  - **barreChordStrokeWidth** (number) - Optional - Stroke width for barre chords.
  - **fretSize** (number) - Optional - Size of frets.
  - **sidePadding** (number) - Optional - Padding on the sides.
  - **emptyStringIndicatorSize** (number) - Optional - Size of the empty string indicator.
  - **strokeWidth** (number) - Optional - Global stroke width.
  - **nutWidth** (number) - Optional - Width of the nut.
  - **titleFontSize** (number) - Optional - Font size for the title.
  - **titleBottomMargin** (number) - Optional - Bottom margin for the title.
  - **fontFamily** (string) - Optional - Font family for text elements.
  - **fixedDiagramPosition** (boolean) - Optional - Keep diagram position consistent.
  - **watermark** (string) - Optional - Text for the watermark.
  - **watermarkFontSize** (number) - Optional - Font size for the watermark.
  - **watermarkColor** (string) - Optional - Color of the watermark.
  - **watermarkFontFamily** (string) - Optional - Font family for the watermark.
  - **svgTitle** (string) - Optional - Title attribute for the SVG element (accessibility).
  - **showFretMarkers** (boolean) - Optional - Whether to show fret markers.
  - **fretMarkerShape** (string) - Optional - Shape of fret markers ('circle', 'square', 'triangle', 'pentagon').
  - **fretMarkerSize** (number) - Optional - Size of fret markers.
  - **fretMarkerColor** (string) - Optional - Color of fret markers.
  - **fretMarkers** (array) - Optional - Array of fret marker positions.

### Request Example
```javascript
import {
  SVGuitarChord,
  FretLabelPosition,
  Orientation,
  ChordStyle,
  BarreChordStyle,
  Shape
} from 'svguitar'

const chart = new SVGuitarChord('#chart')

chart.configure({
  title: 'G7',
  strings: 6,
  frets: 5,
  position: 1,
  orientation: Orientation.vertical,
  style: ChordStyle.normal,
  tuning: ['E', 'A', 'D', 'G', 'B', 'E'],
  tuningsFontSize: 28,
  tuningsColor: '#666',
  fretLabelPosition: FretLabelPosition.RIGHT,
  fretLabelFontSize: 38,
  fretLabelColor: '#000',
  noPosition: false,
  color: '#000',
  backgroundColor: '#FFFFFF',
  titleColor: '#000',
  stringColor: '#000',
  fretColor: '#000',
  fingerSize: 0.65,
  fingerColor: '#000',
  fingerTextColor: '#FFF',
  fingerTextSize: 24,
  fingerStrokeColor: '#000',
  fingerStrokeWidth: 0,
  barreChordStyle: BarreChordStyle.RECTANGLE,
  barreChordRadius: 0.25,
  barreChordStrokeColor: '#000',
  barreChordStrokeWidth: 0,
  fretSize: 1.5,
  sidePadding: 0.2,
  emptyStringIndicatorSize: 0.6,
  strokeWidth: 2,
  nutWidth: 10,
  titleFontSize: 48,
  titleBottomMargin: 0,
  fontFamily: 'Arial, "Helvetica Neue", Helvetica, sans-serif',
  fixedDiagramPosition: false,
  watermark: 'Created with SVGuitar',
  watermarkFontSize: 12,
  watermarkColor: 'rgba(0,0,0,0.3)',
  watermarkFontFamily: 'Arial',
  svgTitle: 'Guitar chord diagram of G7',
  showFretMarkers: true,
  fretMarkerShape: Shape.CIRCLE,
  fretMarkerSize: 0.4,
  fretMarkerColor: 'rgba(0, 0, 0, 0.2)',
  fretMarkers: [3, 5, 7, 9, { fret: 12, double: true }]
})
.chord({ fingers: [[1, 1], [2, 0], [3, 0], [4, 0], [5, 2], [6, 3]], barres: [] })
.draw()
```
```

--------------------------------

### Configure SVGuitar Chord Diagram Appearance

Source: https://context7.com/omnibrain/svguitar/llms.txt

Demonstrates how to use the configure() method to set global properties such as orientation, colors, fonts, and fret markers. This method accepts an object containing all visual settings and returns the instance for chaining.

```javascript
import { SVGuitarChord, FretLabelPosition, Orientation, ChordStyle, BarreChordStyle, Shape } from 'svguitar';
const chart = new SVGuitarChord('#chart');
chart.configure({
  title: 'G7',
  strings: 6,
  frets: 5,
  orientation: Orientation.vertical,
  style: ChordStyle.normal,
  tuning: ['E', 'A', 'D', 'G', 'B', 'E'],
  color: '#000',
  showFretMarkers: true,
  fretMarkerShape: Shape.CIRCLE,
  fretMarkers: [3, 5, 7, 9, { fret: 12, double: true }]
})
.chord({ fingers: [[1, 1], [2, 0], [3, 0], [4, 0], [5, 2], [6, 3]], barres: [] })
.draw();
```

--------------------------------

### Initialize and Render SVGuitar Chord Chart

Source: https://github.com/omnibrain/svguitar/blob/master/demo/index.html

This snippet demonstrates how to initialize the SVGuitar instance, configure visual settings like orientation and style, and render a chord chart based on a JSON input. It includes event handling for form submissions to dynamically update the chart.

```javascript
(function () { var initialSettings = { title: 'F# minor', color: '#000000', strings: 6, frets: 4, position: 9, nutSize: 0.65, strokeWidth: 2, style: 'normal', orientation: 'vertical', }; var initialChord = { fingers: [ [2, 2], [3, 3], [4, 3], [6, 'x'], ], barres: [{ fromString: 5, toString: 1, fret: 1 }], }; var chart = new svguitar.SVGuitarChord('#result').configure(initialSettings).chord(initialChord); function drawChord(chord, settings) { try { chart.configure(settings).chord(chord).draw(); } catch (err) { alert('Failed to create chart: ' + err.message); throw err; } } $('#chart-config-form,#chord-form').submit(function (e) { e.preventDefault(); var settings = $('#chart-config-form').serializeArray().reduce(function (acc, cur) { acc[cur.name] = isNaN(cur.value) ? cur.value : Number(cur.value); return acc; }, {}); try { var chord = JSON.parse($('#chord-input').val()); } catch (err) { alert('Failed to parse the chord.'); return; } drawChord(chord, settings); }); drawChord(initialChord, initialSettings); })();
```

--------------------------------

### Use SVGuitar via CDN in HTML

Source: https://context7.com/omnibrain/svguitar/llms.txt

Demonstrates how to use SVGuitar by including it directly in an HTML file via a CDN. This method is useful for quick prototyping without a build process.

```html
<!DOCTYPE html>
<html>
<head>
  <title>SVGuitar Demo</title>
</head>
<body>
  <div id="chart"></div>

  <script src="https://omnibrain.github.io/svguitar/js/svguitar.umd.js"></script>
  <script>
    var chart = new svguitar.SVGuitarChord('#chart')
      .configure({
        title: 'C Major',
        strings: 6,
        frets: 4
      })
      .chord({
        fingers: [
          [1, 0],      // Open string
          [2, 1],      // 2nd string, 1st fret
          [3, 0],      // Open string
          [4, 2],      // 4th string, 2nd fret
          [5, 3],      // 5th string, 3rd fret
          [6, 'x']     // Muted string
        ],
        barres: []
      })
      .draw();
  </script>
</body>
</html>
```

--------------------------------

### Define Chord Fingering and Barre Chords with SVGuitarChord

Source: https://context7.com/omnibrain/svguitar/llms.txt

Illustrates the usage of the `chord()` method to define finger positions and barre chords. It details the format for finger arrays and barre chord objects, including options for text and color.

```javascript
import { SVGuitarChord, Shape } from 'svguitar'

const chart = new SVGuitarChord('#chart')

chart.chord({
  // Fingers: [string, fret, text or options]
  fingers: [
    [1, 2, '1'],                              // String 1, fret 2, with text '1'
    [2, 3, { text: '2', color: '#FF0000' }],  // String 2, fret 3, red finger
    [3, 2, { text: '3', shape: Shape.SQUARE }], // Square shaped finger
    [4, 0],                                    // Open string (fret 0)
    [5, 'x'],                                  // Muted string
    [6, 'x', { text: 'X', textColor: 'blue' }] // Muted with custom text
  ],

  // Barre chords
  barres: [
    {
      fromString: 5,
      toString: 1,
      fret: 1,
      text: '1',
      color: '#333',
      textColor: '#FFF'
    }
  ],

  // Optional: title and position can be set here or in configure()
  title: 'F Major',
  position: 1
}).draw()
```

--------------------------------

### Extend SVGuitarChord with Plugins

Source: https://context7.com/omnibrain/svguitar/llms.txt

Demonstrates how to extend the SVGuitarChord class by creating custom plugins to add new methods like PNG export or SVG markup retrieval.

```javascript
import { SVGuitarChord } from 'svguitar'

function myExportPlugin(instance) {
  return {
    exportToPng: function() {
      const svg = instance.container.querySelector('svg')
      console.log('Exporting to PNG...')
    },
    getSvgMarkup: function() {
      return instance.container.innerHTML
    }
  }
}

const SVGuitarChordWithExport = SVGuitarChord.plugin(myExportPlugin)
const chart = new SVGuitarChordWithExport('#chart')
chart.configure({ title: 'Chord with Export' })
  .chord({ fingers: [[1, 2], [2, 3]], barres: [] })
  .draw()

chart.exportToPng()
const markup = chart.getSvgMarkup()
```

--------------------------------

### draw() Method

Source: https://context7.com/omnibrain/svguitar/llms.txt

Render the chord diagram to the container and return the dimensions. Call this after setting up the chord and configuration.

```APIDOC
## draw() Method

### Description
Render the chord diagram to the container and return the dimensions. Call this after setting up the chord and configuration.

### Method
`draw()`

### Returns
- **object** - An object containing the `width` and `height` of the rendered SVG.

### Request Example
```javascript
import { SVGuitarChord } from 'svguitar'

const chart = new SVGuitarChord('#chart')
  .configure({ title: 'E Minor' })
  .chord({
    fingers: [
      [1, 0],
      [2, 0],
      [3, 0],
      [4, 2],
      [5, 2],
      [6, 0]
    ],
    barres: []
  })

// draw() returns the dimensions of the rendered SVG
const { width, height } = chart.draw()

console.log(`Chart rendered: ${width}x${height}`)
// Output: Chart rendered: 400x[calculated height]
```
```

--------------------------------

### Define Barre Chords with Customizable Styles in JavaScript

Source: https://context7.com/omnibrain/svguitar/llms.txt

Demonstrates how to define barre chords using SVGuitar, supporting both rectangle (default) and arc styles. It covers customization of appearance like color, text, and borders, and shows how to apply mixed styles within a single diagram.

```javascript
import { SVGuitarChord, BarreChordStyle } from 'svguitar'

const chart = new SVGuitarChord('#chart')

// Rectangle style barre (default)
chart.chord({
  fingers: [
    [2, 2],
    [3, 3],
    [4, 3]
  ],
  barres: [
    {
      fromString: 6,           // Starting string (lowest pitch)
      toString: 1,             // Ending string (highest pitch)
      fret: 1,                 // Fret position
      text: '1',               // Label inside barre
      color: '#333',           // Fill color
      textColor: '#FFF',       // Text color
      strokeColor: '#000',     // Border color
      strokeWidth: 2,          // Border width
      className: 'barre-1'     // Custom CSS class
    }
  ]
})
.configure({ title: 'F Major Barre' })
.draw()

// Arc style barre
const chart2 = new SVGuitarChord('#chart2')

chart2.chord({
  fingers: [[2, 2], [3, 3], [4, 3]],
  barres: [
    {
      fromString: 6,
      toString: 1,
      fret: 1,
      style: BarreChordStyle.ARC  // Override global style for this barre
    }
  ]
})
.configure({
  title: 'F Major (Arc Style)',
  barreChordStyle: BarreChordStyle.ARC  // Global arc style
})
.draw()

// Mixed styles
const chart3 = new SVGuitarChord('#chart3')

chart3.chord({
  fingers: [],
  barres: [
    { fromString: 5, toString: 1, fret: 1, style: BarreChordStyle.ARC },
    { fromString: 4, toString: 2, fret: 3, style: BarreChordStyle.RECTANGLE }
  ]
})
.configure({ title: 'Mixed Barre Styles', frets: 5 })
.draw()
```

--------------------------------

### Customize SVGuitar Chord Chart

Source: https://github.com/omnibrain/svguitar/blob/master/README.md

Instantiates and customizes an SVG guitar chord chart using the SVGuitar library. Allows detailed configuration of finger positions, barre chords, and various visual aspects of the chart. Dependencies include the SVGuitar library. Inputs are a CSS selector and a configuration object. Outputs are a customized SVG chord chart.

```javascript
new SVGuitarChord('#some-selector')
  .chord({
    fingers: [
      [2, 2, '2'],
      [3, 3, { text: '4', color: '#F00', className: 'red' }],
      [4, 3, { text: '3', shape: 'triangle' }],
      [6, 'x']
    ],
    barres: [
      {
        fromString: 5,
        toString: 1,
        fret: 1,
        text: '1',
        color: '#0F0',
        textColor: '#F00',
        className: 'my-barre-chord',
        style: 'rectangle'
      }
    ],
    title: 'F# minor',
    position: 9,
  })
  .configure({
    orientation: 'vertical',
    style: 'normal',
    strings: 6,
    frets: 4,
    position: 1,
    tuning: ['E', 'A', 'D', 'G', 'B', 'E'],
    fretLabelPosition: 'right',
    fretLabelFontSize: 38,
    tuningsFontSize: 28,
    fingerSize: 0.65,
    fingerColor: '#000',
    fingerTextColor: '#FFF',
    fingerTextSize: 22,
    fingerStrokeColor: '#000000',
    fingerStrokeWidth: 0,
    barreChordStyle: 'rectangle',
    barreChordStrokeColor: '#000000',
    barreChordStrokeWidth: 0,
    fretSize: 1.5,
    sidePadding: 0.2,
    fontFamily: 'Arial, "Helvetica Neue", Helvetica, sans-serif',
    titleFontSize: 48,
    titleBottomMargin: 0,
    color: '#000000',
    backgroundColor: 'none',
    barreChordRadius: 0.25,
    emptyStringIndicatorSize: 0.6,
    strokeWidth: 2,
    nutWidth: 10
  });
```

--------------------------------

### Customize Finger Markers with FingerOptions

Source: https://context7.com/omnibrain/svguitar/llms.txt

Explains how to define complex finger markers using the FingerOptions interface. This allows for custom shapes, colors, text, and stroke styles for individual fingers on the chord diagram.

```javascript
import { SVGuitarChord, Shape } from 'svguitar';
const chart = new SVGuitarChord('#chart');
chart.chord({
  fingers: [
    [1, 2, '1'],
    [2, 3, { text: '2', color: 'blue' }],
    [4, 3, { text: '4', shape: Shape.CIRCLE }],
    [5, 4, { shape: Shape.SQUARE }],
    [6, 'x', { strokeColor: 'red', strokeWidth: 3 }]
  ],
  barres: []
})
.configure({ frets: 6 })
.draw();
```

--------------------------------

### Apply Hand-Drawn Style to Chord Diagrams in JavaScript

Source: https://context7.com/omnibrain/svguitar/llms.txt

Demonstrates how to enable a sketchy, hand-drawn appearance for chord diagrams using the `handdrawn` style option in SVGuitar, which leverages the Rough.js rendering engine. It includes configuration for title, number of strings, and frets.

```javascript
import { SVGuitarChord, ChordStyle } from 'svguitar'

const chart = new SVGuitarChord('#chart')

chart.configure({
  style: ChordStyle.handdrawn,  // Enable hand-drawn style
  title: 'D Major (Sketched)',
  strings: 6,
  frets: 4
})
.chord({
  fingers: [
    [1, 2],
    [2, 3],
    [3, 2],
    [4, 0],
    [5, 'x'],
    [6, 'x']
  ],
  barres: []
})
.draw()
```

--------------------------------

### Add Decorative Fret Markers in JavaScript

Source: https://context7.com/omnibrain/svguitar/llms.txt

Illustrates how to add and customize fret markers (dots) on a chord diagram using SVGuitar. It covers global settings for shape, size, and color, as well as defining individual markers with custom styles and handling double markers for frets like the 12th.

```javascript
import { SVGuitarChord, Shape } from 'svguitar'

const chart = new SVGuitarChord('#chart')

chart.configure({
  frets: 14,
  showFretMarkers: true,

  // Global fret marker settings
  fretMarkerShape: Shape.CIRCLE,
  fretMarkerSize: 0.4,
  fretMarkerColor: 'rgba(0, 0, 0, 0.2)',
  fretMarkerStrokeColor: '#000',
  fretMarkerStrokeWidth: 0,
  doubleFretMarkerDistance: 0.4,

  // Define fret markers
  fretMarkers: [
    2,  // Simple marker at fret 3 (0-indexed, so 2 = 3rd fret)
    4,  // 5th fret
    6,  // 7th fret
    8,  // 9th fret

    // Customized single marker
    {
      fret: 11,
      color: '#FF0000',
      shape: Shape.SQUARE,
      size: 0.5,
      strokeColor: '#000',
      strokeWidth: 1,
      className: 'custom-marker'
    },

    // Double marker (like 12th fret)
    {
      fret: 11,
      double: true,
      distance: 0.4,  // Distance between the two markers
      color: 'rgba(0, 0, 0, 0.3)'
    }
  ]
})
.chord({ fingers: [], barres: [] })
.draw()

// Hide all fret markers
const chart2 = new SVGuitarChord('#chart2')
chart2.configure({
  showFretMarkers: false,
  fretMarkers: [2, 4, 6]  // These will be ignored
})
.chord({ fingers: [[1, 2]], barres: [] })
.draw()
```

--------------------------------

### Define Finger Positions with Constants

Source: https://context7.com/omnibrain/svguitar/llms.txt

Utilize the OPEN and SILENT constants to improve the readability of chord definitions compared to using raw integers or strings.

```javascript
import { SVGuitarChord, OPEN, SILENT } from 'svguitar'

const chart = new SVGuitarChord('#chart')

chart.chord({
  fingers: [
    [1, OPEN],
    [2, 1],
    [3, OPEN],
    [4, 2],
    [5, 3],
    [6, SILENT]
  ],
  barres: []
})
.configure({ title: 'C Major' })
.draw()
```

--------------------------------

### Configure SVGuitar Diagram Properties

Source: https://github.com/omnibrain/svguitar/blob/master/README.md

This snippet demonstrates how to configure various visual properties of an SVGuitar diagram, such as colors, fonts, and marker styles. These options allow for extensive customization of the generated SVG output.

```javascript
new SVGuitar({
    titleColor: '#000000',
    stringColor: '#000000',
    fretLabelColor: '#000000',
    tuningsColor: '#000000',
    fretColor: '#000000',
    fixedDiagramPosition: false,
    watermark: 'some watermark',
    watermarkFontSize: 12,
    watermarkColor: '#000000',
    watermarkFontFamily: 'Arial, "Helvetica Neue", Helvetica, sans-serif',
    svgTitle: 'Guitar chord diagram of F# minor',
    fretMarkers: [
      2, 4, 6, 8, { fret: 11, double: true },
    ],
    showFretMarkers: true,
    fretMarkerShape: 'circle',
    fretMarkerSize: 0.4,
    fretMarkerColor: 'rgba(0, 0, 0, 0.2)',
    fretMarkerStrokeColor: '#000000',
    fretMarkerStrokeWidth: 0,
    doubleFretMarkerDistance: 0.4
  }).draw();
```

--------------------------------

### Render Chord Diagrams in Horizontal Orientation in JavaScript

Source: https://context7.com/omnibrain/svguitar/llms.txt

Shows how to configure SVGuitar to render chord diagrams in a horizontal orientation. This is useful for alternative display formats or for left-handed players. It includes settings for title, frets, position, fret label position, and tuning.

```javascript
import { SVGuitarChord, Orientation, FretLabelPosition } from 'svguitar'

const chart = new SVGuitarChord('#chart')

chart.configure({
  orientation: Orientation.horizontal,
  title: 'G Major (Horizontal)',
  frets: 5,
  position: 1,
  fretLabelPosition: FretLabelPosition.LEFT,  // 'left' = bottom in horizontal
  tuning: ['E', 'A', 'D', 'G', 'B', 'E']
})
.chord({
  fingers: [
    [1, 3],
    [2, 0],
    [3, 0],
    [4, 0],
    [5, 2],
    [6, 3]
  ],
  barres: []
})
.draw()
```

--------------------------------

### Render Chord Diagram with draw()

Source: https://context7.com/omnibrain/svguitar/llms.txt

Shows how to render the chord diagram to the DOM using the draw() method. This method returns the calculated dimensions (width and height) of the generated SVG.

```javascript
import { SVGuitarChord } from 'svguitar';
const chart = new SVGuitarChord('#chart')
  .configure({ title: 'E Minor' })
  .chord({
    fingers: [[1, 0], [2, 0], [3, 0], [4, 2], [5, 2], [6, 0]],
    barres: []
  });
const { width, height } = chart.draw();
console.log(`Chart rendered: ${width}x${height}`);
```

--------------------------------

### Perform Server-Side Rendering in Node.js

Source: https://context7.com/omnibrain/svguitar/llms.txt

Generate SVG chord diagrams on the server using svgdom to simulate a browser environment.

```javascript
const { createSVGWindow } = require('svgdom')
const { registerWindow } = require('@svgdotjs/svg.js')
const { SVGuitarChord } = require('svguitar')

const window = createSVGWindow()
const document = window.document
registerWindow(window, document)

const chart = new SVGuitarChord(document.documentElement)

chart.configure({ title: 'Server-Generated Chord', strings: 6, frets: 4 })
.chord({ fingers: [[1, 0], [2, 1], [3, 0], [4, 2], [5, 3], [6, 'x']], barres: [] })
.draw()

const svgOutput = document.documentElement.outerHTML
const fs = require('fs')
fs.writeFileSync('chord.svg', svgOutput)
```

--------------------------------

### Configure Chord Diagram Watermarks

Source: https://context7.com/omnibrain/svguitar/llms.txt

Adds a customizable watermark to the bottom of the chord diagram for branding or attribution purposes.

```javascript
import { SVGuitarChord } from 'svguitar'

const chart = new SVGuitarChord('#chart')

chart.configure({
  title: 'E Minor',
  tuning: ['E', 'A', 'D', 'G', 'B', 'E'],
  watermark: 'Created with SVGuitar',
  watermarkFontSize: 12,
  watermarkColor: 'rgba(0, 0, 0, 0.4)',
  watermarkFontFamily: 'Arial, sans-serif'
})
.chord({
  fingers: [[1, 0], [2, 0], [3, 0], [4, 2], [5, 2], [6, 0]],
  barres: []
})
.draw()
```

--------------------------------

### Finger Options

Source: https://context7.com/omnibrain/svguitar/llms.txt

Customize individual finger markers with colors, shapes, text, and stroke properties using the FingerOptions interface.

```APIDOC
## Finger Options

### Description
Customize individual finger markers with colors, shapes, text, and stroke properties using the FingerOptions interface.

### Method
`chord({ fingers: [...] })`

### Parameters
#### Request Body (within `chord` method)
- **fingers** (array) - Required - An array of finger placements.
  Each element can be:
  - `[stringNumber, fretNumber]` for a simple finger placement.
  - `[stringNumber, fretNumber, label]` where `label` can be a string (e.g., '1', 'X', 'R') or an object.
  - `[stringNumber, fretNumber, { text, color, textColor, strokeColor, strokeWidth, shape, className }]` for detailed customization.

#### Finger Object Properties
- **text** (string) - Optional - The text to display on the finger marker.
- **color** (string) - Optional - The background color of the finger marker.
- **textColor** (string) - Optional - The color of the text on the finger marker.
- **strokeColor** (string) - Optional - The stroke color of the finger marker.
- **strokeWidth** (number) - Optional - The stroke width of the finger marker.
- **shape** (string) - Optional - The shape of the finger marker ('circle', 'square', 'triangle', 'pentagon').
- **className** (string) - Optional - A CSS class to apply to the finger marker.

### Request Example
```javascript
import { SVGuitarChord, Shape } from 'svguitar'

const chart = new SVGuitarChord('#chart')

chart.chord({
  fingers: [
    // Simple text label
    [1, 2, '1'],

    // Colored finger
    [2, 3, { text: '2', color: 'blue' }],

    // Custom text color
    [3, 2, { text: '3', textColor: 'red' }],

    // Different shapes
    [4, 3, { text: '4', shape: Shape.CIRCLE }],    // Default
    [5, 4, { shape: Shape.SQUARE }],
    [1, 4, { shape: Shape.TRIANGLE }],
    [2, 5, { shape: Shape.PENTAGON }],

    // With stroke/outline
    [3, 5, {
      text: 'X',
      color: 'white',
      textColor: 'black',
      strokeColor: 'black',
      strokeWidth: 2,
      shape: Shape.SQUARE
    }],

    // Custom CSS class
    [4, 5, { text: 'A', className: 'root-note' }],

    // Open string with text
    [5, 0, { text: 'R', textColor: 'green' }],

    // Muted string with styling
    [6, 'x', { strokeColor: 'red', strokeWidth: 3 }]
  ],
  barres: []
})
.configure({ frets: 6 })
.draw()
```
```

--------------------------------

### Clear and Remove Chord Diagrams using clear() and remove() in JavaScript

Source: https://context7.com/omnibrain/svguitar/llms.txt

Explains the usage of the `clear()` and `remove()` methods in SVGuitar. `clear()` removes the current diagram content while keeping the SVG element, allowing for redrawing, whereas `remove()` completely detaches the SVG element from the DOM.

```javascript
import { SVGuitarChord } from 'svguitar'

const chart = new SVGuitarChord('#chart')

// Draw initial chord
chart.configure({ title: 'First Chord' })
  .chord({ fingers: [[1, 2]], barres: [] })
  .draw()

// Clear and redraw with new chord (keeps SVG element)
chart.clear()
chart.configure({ title: 'Second Chord' })
  .chord({ fingers: [[2, 3]], barres: [] })
  .draw()

// Completely remove SVG from DOM
chart.remove()

// After remove(), the container will have no SVG element
// You would need to create a new SVGuitarChord instance
```

--------------------------------

### Implement TypeScript Type Safety

Source: https://context7.com/omnibrain/svguitar/llms.txt

Leverage exported TypeScript interfaces and types to ensure chord definitions and configurations are correctly structured.

```typescript
import { SVGuitarChord, Chord, ChordSettings, Finger, Barre, BarreChordStyle, Orientation, ChordStyle, FretLabelPosition, OPEN, SILENT, Shape, SingleFretMarker, DoubleFretMarker } from 'svguitar'

const chord: Chord = {
  fingers: [
    [1, 2, '1'] as Finger,
    [2, 3, { text: '2', color: 'blue' }] as Finger,
    [3, OPEN] as Finger,
    [4, SILENT] as Finger
  ],
  barres: [
    { fromString: 5, toString: 1, fret: 1, text: '1', style: BarreChordStyle.RECTANGLE } as Barre
  ],
  title: 'F Major',
  position: 1
}

const settings: ChordSettings = {
  strings: 6,
  frets: 5,
  orientation: Orientation.vertical,
  style: ChordStyle.normal,
  fretLabelPosition: FretLabelPosition.RIGHT,
  fretMarkers: [
    3,
    { fret: 5, double: true } as DoubleFretMarker,
    { fret: 7, shape: Shape.SQUARE } as SingleFretMarker
  ]
}

const chart = new SVGuitarChord('#chart').configure(settings).chord(chord).draw()
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.