Open2021/12/18にコメント追加3

読者コミュニティ｜rediagram 入門

YUKI YAMAZAKI

本の感想や質問をお気軽にコメントしてください。

utamori

すごくユニークで便利なツールですね！

少し試しているのですが、GoogleCloudで VPCやProject、Folderを表現するには、どのコンポーネントを使うと良いのでしょうか？

教えていただけると幸いです

YUKI YAMAZAKI

コメントありがとうございます！
気づくのが遅れてしまいすみません。

GCPのプロジェクトはGCPコンポーネントのtitle属性で表現できます。

import React from 'react';
import { PNG, Diagram, GeneralIcon } from 'rediagram';
import { GCP, AppEngine, CloudEndpoints, InvizGCP } from '@rediagram/gcp';

PNG(
  <Diagram title="App Engine and Cloud Endpoints">
    <InvizGCP>
      <GeneralIcon name="iOS/Android/Web" type="Mobile client" upstream={['Mobile Backend API']} />
      <GCP title="my-project">
        <CloudEndpoints name="Mobile Backend API" upstream={['API']} />
        <AppEngine name="API" />
      </GCP>
    </InvizGCP>
  </Diagram>,
);

VPCは、@rediagram/gcpのパッケージに VirtualPrivateCloudというコンポーネントがあるのでそちらを使用できますが、GCPコンポーネントのように階層化に対応していないので、意図したような挙動にならないかもしれません。
もし、挙動や描写について意見がある場合はGitHubでissueなど立てていただけると幸いです。

現状、Folderについては表現方法がないので、issue を作成しました。