Pythonで作る！シンプルで使いやすいフローチャートツール #pygame

はじめに

こんにちは！今回は、Pythonとpygameを使って、シンプルで使いやすいフローチャート作成ツールを作ってみました。この記事では、ツールの要件、仕様、実装方法、そして使い方までを詳しく解説します。

📋 要件

複数の図形（開始/終了、処理、判断、入出力）を配置できること
図形間を線で接続できること
図形内にテキストを入力できること
直感的な操作で図形の配置と接続ができること
シンプルで分かりやすいユーザーインターフェース

🛠️ 仕様

画面レイアウト
- 左側にパレット（図形選択用サイドバー）
- 右側にキャンバス（フローチャート作成エリア）
図形
- 種類：楕円（開始/終了）、長方形（処理）、ひし形（判断）、平行四辺形（入出力）
- 各図形に4つの接続端子（上下左右）
操作方法
- 図形の追加：パレットからドラッグ＆ドロップ
- 図形の移動：ドラッグ
- 線の接続：端子をクリックして別の端子をクリック
- テキスト入力：図形をクリックして選択後、キーボード入力
視覚的フィードバック
- 線を引いている途中で仮の線を表示

🚀 実装

それでは、実際のコードを見ていきましょう。

import pygame
import sys

# 色の定義
WHITE = (255, 255, 255)
BLACK = (0, 0, 0)
LIGHT_BLUE = (173, 216, 230)
LIGHT_GREEN = (144, 238, 144)
LIGHT_PINK = (255, 182, 193)
LIGHT_YELLOW = (255, 255, 224)
GRAY = (200, 200, 200)

# 画面サイズ
WIDTH = 1000
HEIGHT = 600
SIDEBAR_WIDTH = 200

class Shape:
    def __init__(self, x, y, width, height, color, shape_type):
        self.rect = pygame.Rect(x, y, width, height)
        self.color = color
        self.text = ""
        self.shape_type = shape_type
        self.connectors = [
            pygame.Rect(x, y + height // 2 - 5, 10, 10),
            pygame.Rect(x + width - 10, y + height // 2 - 5, 10, 10),
            pygame.Rect(x + width // 2 - 5, y, 10, 10),
            pygame.Rect(x + width // 2 - 5, y + height - 10, 10, 10)
        ]

    def draw(self, screen):
        if self.shape_type == "rectangle":
            pygame.draw.rect(screen, self.color, self.rect)
        elif self.shape_type == "oval":
            pygame.draw.ellipse(screen, self.color, self.rect)
        elif self.shape_type == "diamond":
            points = [
                (self.rect.centerx, self.rect.top),
                (self.rect.right, self.rect.centery),
                (self.rect.centerx, self.rect.bottom),
                (self.rect.left, self.rect.centery)
            ]
            pygame.draw.polygon(screen, self.color, points)
        elif self.shape_type == "parallelogram":
            offset = self.rect.width // 4
            points = [
                (self.rect.left + offset, self.rect.top),
                (self.rect.right, self.rect.top),
                (self.rect.right - offset, self.rect.bottom),
                (self.rect.left, self.rect.bottom)
            ]
            pygame.draw.polygon(screen, self.color, points)

        for connector in self.connectors:
            pygame.draw.rect(screen, BLACK, connector)

        font = pygame.font.Font(None, 24)
        text_surface = font.render(self.text, True, BLACK)
        text_rect = text_surface.get_rect(center=self.rect.center)
        screen.blit(text_surface, text_rect)

    def contains(self, pos):
        return self.rect.collidepoint(pos)

    def get_connector(self, pos):
        for i, connector in enumerate(self.connectors):
            if connector.collidepoint(pos):
                return i
        return None

    def move(self, dx, dy):
        self.rect.move_ip(dx, dy)
        for connector in self.connectors:
            connector.move_ip(dx, dy)

class FlowchartTool:
    def __init__(self):
        pygame.init()
        self.screen = pygame.display.set_mode((WIDTH, HEIGHT))
        pygame.display.set_caption("フローチャートメーカー")
        self.clock = pygame.time.Clock()
        self.shapes = []
        self.lines = []
        self.dragging_shape = None
        self.selected_shape = None
        self.line_start = None
        self.font = pygame.font.Font(None, 24)
        self.palette = [
            Shape(20, 20, 160, 80, LIGHT_BLUE, "oval"),
            Shape(20, 120, 160, 80, LIGHT_GREEN, "rectangle"),
            Shape(20, 220, 160, 80, LIGHT_PINK, "diamond"),
            Shape(20, 320, 160, 80, LIGHT_YELLOW, "parallelogram")
        ]
        self.dragging_new = False

    def run(self):
        while True:
            self.handle_events()
            self.draw()
            self.clock.tick(60)

    def handle_events(self):
        for event in pygame.event.get():
            if event.type == pygame.QUIT:
                pygame.quit()
                sys.exit()
            elif event.type == pygame.MOUSEBUTTONDOWN:
                if event.button == 1:  # 左クリック
                    self.handle_left_click(event.pos)
            elif event.type == pygame.MOUSEBUTTONUP:
                if event.button == 1:
                    self.handle_left_release(event.pos)
            elif event.type == pygame.MOUSEMOTION:
                self.handle_mouse_motion(event.pos, event.rel)
            elif event.type == pygame.KEYDOWN:
                if self.selected_shape:
                    if event.key == pygame.K_BACKSPACE:
                        self.selected_shape.text = self.selected_shape.text[:-1]
                    elif event.key == pygame.K_RETURN:
                        self.selected_shape = None
                    else:
                        self.selected_shape.text += event.unicode

    def handle_left_click(self, pos):
        for shape in self.palette:
            if shape.contains(pos):
                self.dragging_new = True
                new_shape = Shape(pos[0], pos[1], 160, 80, shape.color, shape.shape_type)
                self.shapes.append(new_shape)
                self.dragging_shape = new_shape
                return

        for shape in self.shapes:
            connector = shape.get_connector(pos)
            if connector is not None:
                if self.line_start is None:
                    self.line_start = (shape, connector)
                else:
                    start_shape, start_connector = self.line_start
                    if start_shape != shape:
                        self.lines.append((self.line_start, (shape, connector)))
                    self.line_start = None
                return

            if shape.contains(pos):
                self.dragging_shape = shape
                self.selected_shape = shape
                return

        self.selected_shape = None
        self.line_start = None

    def handle_left_release(self, pos):
        if self.dragging_new:
            self.dragging_new = False
            if pos[0] < SIDEBAR_WIDTH:
                self.shapes.pop()
            self.dragging_shape = None
            return

        self.dragging_shape = None

    def handle_mouse_motion(self, pos, rel):
        if self.dragging_shape:
            self.dragging_shape.move(rel[0], rel[1])

    def draw(self):
        self.screen.fill(WHITE)
        pygame.draw.rect(self.screen, GRAY, (0, 0, SIDEBAR_WIDTH, HEIGHT))
        
        for shape in self.shapes:
            shape.draw(self.screen)
        
        for line in self.lines:
            start_shape, start_connector = line[0]
            end_shape, end_connector = line[1]
            start_pos = start_shape.connectors[start_connector].center
            end_pos = end_shape.connectors[end_connector].center
            pygame.draw.line(self.screen, BLACK, start_pos, end_pos, 2)
        
        if self.line_start:
            start_shape, start_connector = self.line_start
            start_pos = start_shape.connectors[start_connector].center
            pygame.draw.line(self.screen, BLACK, start_pos, pygame.mouse.get_pos(), 2)
        
        for shape in self.palette:
            shape.draw(self.screen)
        
        pygame.display.flip()

if __name__ == "__main__":
    tool = FlowchartTool()
    tool.run()

🎨 主要な機能の解説

Shape クラス
- 各図形（楕円、長方形、ひし形、平行四辺形）を表現
- 図形の描画、移動、テキスト表示を管理
- 4つの接続端子を持つ
FlowchartTool クラス
- メインのアプリケーションロジックを管理
- イベント処理（マウス操作、キーボード入力）
- 図形の配置、線の接続、画面の描画を制御
図形の追加と移動
- パレットからドラッグ＆ドロップで新しい図形を追加
- 既存の図形をドラッグして移動
線の接続
- 2つの端子を順にクリックして線を引く
- 接続中は仮の線を表示してフィードバックを提供
テキスト入力
- 図形をクリックして選択し、キーボードで入力

🖱️ 使い方

左側のパレットから必要な図形を選び、ドラッグしてキャンバスに配置します。
図形をクリック＆ドラッグで移動できます。
線を引くには、以下の手順で行います：
- 最初の図形の端子（小さな黒い四角）をクリックします。
- マウスを動かすと、仮の線が表示されます。
- 別の図形の端子をクリックすると、線が確定します。
図形をクリックして選択し、キーボードでテキストを入力できます。

🌈 今後の改善案

線の種類（直線、曲線、矢印）を選択できる機能
図形のリサイズ機能
フローチャートの保存と読み込み機能
テキストのフォントやサイズの変更機能
取り消し（Undo）と再実行（Redo）機能

🎉 さいごに

このツールを使えば、簡単にフローチャートを作成できます。プログラムの流れやビジネスプロセスの可視化に役立つでしょう。ぜひ、このコードを基に自分だけのカスタマイズを加えて、さらに素晴らしいツールに進化させてください！

Happy Flowcharting! 🚀✨