New feature: add quick document entry

src/routes/edit.svelte

@@ -21,7 +21,23 @@
  code: 'mermaid',
  config: 'json'
  };
+ const docMap = {
+ graph: '/#/flowchart',
+ graph_config: '/#/flowchart?id=configuration',
+ sequenceDiagram: '/#/sequenceDiagram',
+ sequenceDiagram_config: '/#/sequenceDiagram?id=configuration',
+ classDiagram: '/#/classDiagram',
+ classDiagram_config: '/#/classDiagram?id=configuration',
+ 'stateDiagram-v2': '/#/stateDiagram',
+ gantt: '/#/gantt',
+ gantt_config: '/#/gantt?id=configuration',
+ pie: '/#/pie',
+ erDiagram: '/#/entityRelationshipDiagram',
+ erDiagram_config: '/#/entityRelationshipDiagram?id=styling',
+ journey: '/#/user-journey'
+ };
  let text = '';
+ let docKey = '';
  let language: 'mermaid' | 'json' = 'mermaid';
  let errorMarkers: monaco.editor.IMarkerData[] = [];
  $: language = languageMap[selectedMode];
@@ -37,6 +53,9 @@
  if (state.updateEditor) {
  text = selectedMode === 'code' ? state.code : state.mermaid;
  }
+ let codeTypeMatch = /([\S]+)[\s\n]/.exec(state.code);
+ docKey = codeTypeMatch && codeTypeMatch.length > 1 ? codeTypeMatch[1] : null;
+ docKey = docKey ? docKey + (selectedMode !== 'code' ? '_config' : '') : null;
  });
  const tabSelectHandler = (message: CustomEvent<Tab>) => {
  $codeStore.updateEditor = true;
@@ -136,7 +155,7 @@
  on:click={syncDiagram}><i class="fas fa-sync" /></button>
  {/if}
 
- <div class="form-control">
+ <div class="form-control flex-row items-center">
  <label class="cursor-pointer label" for="autoSync">
  <input
  type="checkbox"
@@ -145,6 +164,11 @@
  bind:checked={$codeStore.autoSync} />
  <span> Auto sync</span>
  </label>
+ <a
+ target="_blank"
+ class="btn btn-primary btn-xs shadow-lg"
+ href="https://mermaid-js.github.io/mermaid/{docMap[docKey] || ''}"
+ ><i class="far fa-eye mr-2" /> DOC</a>
  </div>
  </div>
  </div>