docs: add directives to basic-syntax.mdx

hikerpig · Feb 6, 2022 · 3016714 · 3016714
1 parent 3cabdaf
commit 3016714
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 4 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+packages/pintora-diagrams/src/*/parser/*.[jt]s
diff --git a/packages/pintora-renderer/src/index.ts b/packages/pintora-renderer/src/index.ts
@@ -3,7 +3,7 @@ import { IRenderer } from './type'
 import { makeRenderer, RendererType, BaseRenderer, rendererRegistry } from './renderers'
 
 export type RenderOptions = {
-  container: any
+  container: HTMLElement
   renderer?: RendererType
   onRender?(renderer: IRenderer): void
 }

diff --git a/packages/pintora-standalone/src/index.ts b/packages/pintora-standalone/src/index.ts
@@ -44,9 +44,9 @@ const pintoraStandalone = {
   ...pintora,
   renderTo(code: string, options: RenderToOptions) {
     const { container, config } = options
-    let ctn: HTMLDivElement
+    let ctn: HTMLElement
     if (typeof container === 'string') {
-      ctn = document.querySelector(container) as any
+      ctn = document.querySelector(container)
     } else {
       ctn = container
     }
@@ -79,7 +79,10 @@ const pintoraStandalone = {
           if (canvasBackground) graphicIR.bgColor = canvasBackground
         }
 
-        render(graphicIR, options)
+        render(graphicIR, {
+          ...options,
+          container: ctn,
+        })
       }
     } finally {
       if (config && backupConfig) configApi.replaceConfig(backupConfig)

diff --git a/website/docs/getting-started/basic-syntax.mdx b/website/docs/getting-started/basic-syntax.mdx
@@ -23,3 +23,31 @@ sequenceDiagram
   %% another line comment
   A-->B: Hi there!
 ```
+
+## Directives
+
+### @param and @config
+
+You can override current diagram config with these directives.
+
+See [Config](/configuration/config.md) for more details.
+
+```pintora play
+erDiagram
+  @param fontSize 18
+  @config({
+    "themeConfig": {
+      "theme": "larkLight"
+    },
+    "er": {
+      "curvedEdge": false
+    }
+  })
+  CUSTOMER {
+    int id PK
+    int address FK
+  }
+  CUSTOMER ||--o{ ORDER : places
+  ORDER ||--|{ LINE-ITEM : contains
+  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+```
diff --git a/...n/zh-CN/docusaurus-plugin-content-docs/current/getting-started/basic-syntax.mdx b/...n/zh-CN/docusaurus-plugin-content-docs/current/getting-started/basic-syntax.mdx
@@ -23,3 +23,31 @@ sequenceDiagram
   %% another line comment
   A-->B: Hi there!
 ```
+
+## Directives 指令
+
+### @param 和 @config
+
+可以使用这两个指令来覆盖当前图表配置。
+
+更多细节请查看 [Config](/configuration/config.md)。
+
+```pintora play
+erDiagram
+  @param fontSize 18
+  @config({
+    "themeConfig": {
+      "theme": "larkLight"
+    },
+    "er": {
+      "curvedEdge": false
+    }
+  })
+  CUSTOMER {
+    int id PK
+    int address FK
+  }
+  CUSTOMER ||--o{ ORDER : places
+  ORDER ||--|{ LINE-ITEM : contains
+  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+```