はじめる

最短の利用方法はbrowser Playgroundです。Formatter、validator、layout engine、SVG rendererがWebAssemblyとしてlocalで動作するため、commandのinstallやrendering APIへのsource送信は不要です。

最初のdocumentを書く

Editorを次のexampleへ置き換えます。

stack 1.0

diagram "Checkout" {
  theme default

  node shopper "Shopper" {
    kind actor
  }

  group application "Application" {
    node web "Web app" {
      kind client
      detail "React"
    }

    node api "Checkout API" {
      kind service
      detail "Rust"
    }

    layout {
      direction right
      order [web, api]
    }
  }

  node orders "Orders" {
    kind database
    detail "PostgreSQL"
  }

  edge shopper -> web "HTTPS" {
    kind request
  }

  edge web -> api "JSON" {
    kind request
  }

  edge api -> orders "SQL" {
    kind data
  }

  layout {
    direction right
    order [shopper, application, orders]
  }
}

Renderして確認する

Runを選ぶか、Command/Ctrl + Enterを押します。Previewにstandalone SVGが表示されます。Previewを選ぶと拡大でき、必要ならDownload SVGで保存できます。

Sourceは4つの要素で構成されています。

1. stack 1.0がlanguage versionを宣言します。
2. diagramが1つのtitleとarchitecture全体を持ちます。
3. nodeとgroupがcomponentとboundaryを宣言します。
4. edgeがrelationshipを、layoutが制約された配置intentを記録します。

CheckとFormat

CheckはSVGを置き換えず、validationとlayout pipeline全体を実行します。Formatはline commentと意味を保持しながら、syntaxがvalidなsourceをcanonicalな2-space形式へ書き換えます。

問題があると、severity、stable code、location、source frame、expected value、利用可能なcorrective helpが表示されます。Diagnosticを選ぶと該当source rangeへfocusします。

次に読むもの

• Lexical ruleと完全なgrammarはDocumentとsyntaxを参照します。
• ComponentとboundaryはNodeとgroupを参照します。
• Relationshipと配置intentはEdgeとlayoutを参照します。
• Visual systemや明示iconを選ぶ前にThemeとiconを参照します。