スマートフォンで入力と出力の接続されたボックスを表示するにはどうすればよいですか？
入力と出力を持つことができるブラックボックスの概念を想像してみてください。
ボックスは他のボックスと接続できます。私たちはこのようなものを持っています：
スマートフォンを想像してみてください。 「わかりました、この男はクレイジーです。」あなたは考えた。そして、あなたは正しいです。
スマートフォンでこの種の構造の代替表現を考えているときに、いくつかの問題があります。
具体的な例を挙げましょう。 
ご覧のとおり、同じタイプの2つのボックスがあり、それぞれに番号が付けられています。これら2つの数値は、合計して合計を生成するボックスに入ります。その合計は、受け取った数を表示するボックスに接続されています。
ボックスには2つの重要なタイプがあります。情報プロバイダーとアクションです。通常、情報プロバイダーはこれらの図を開始し、アクションは通常それらを終了します。
使用されているブロックのタイプと、ブロック同士の接続方法を理解することが重要です。別の関連する事実は、新しいタイプのブロックを作成できることです。したがって、この構造は柔軟で拡張可能です。
編集：
まだ解決策には至っていませんが、確かに知っていることが1つあります。
ユーザーがシーンを単純化し、ブロックをグループ化できるシステムが必要です。それでも、これをどのように表現するかについて問題があります。すべての情報は重要ですか？
ユーザーが「画像全体」または少なくともその画像の重要事項を表示する必要があることを確信しています。重要であると私が信じている最低限は次のとおりです。
- 何が何に接続されているかを知る
- 何が情報を提供し、最終結果は何ですか
- ボックス間での情報の流れ。
あなたが説明していることは、Quartz Composerがどのように機能するかと非常に似ています：
スクリーンショット Anthony Mattoxによるこのページ
このような単純なグラフを使用すると、これがモバイルUIに転置される可能性があることを理解するのは非常に簡単です（ただし、混乱がないわけではありません）。
このアプリケーションの問題（私はあなたにも当てはまると思います）は、すぐに次のように展開できるということです。
Ian Grantによるこのページ]から取得したスクリーンショット
これは、モバイルデバイスで適切に解決することは不可能である可能性があります。 1つのオプションとして、UIを個別にナビゲートしている間、オブジェクトを一時的に保持する a "shelf"、like in old old NeXTSTEP days のアイデアを導入することができます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
これにより、アウトレットをスクロールせずに左パネルをスクロールできます。シェルフのアウトレットをペアリングすることにより、各ペアに入力アウトレットアウトレットがあり、接続されている2つのボックスがお互いに目に見えるほど接近している必要はありません。
価値があるのは、これらのシステムが機能する理由の大部分は、フックする空間認識です。ユーザーがズームおよびパン可能なインターフェースを使用して、ユーザーが獣全体を空間的に視覚化できるようにすることで、私は想像できると思います。
私は2種類のボックスしかない構造に取り組んでいます。1つは動作/アクションを提供し、もう1つはコンテナを提供します。この構造は、システムエンジニアリングに使用されます。
最初のタイプのボックスはシステムメソッドと呼ばれ、2番目のシステム要素です。システム要素には、システムメソッドとシステム要素を含めることができます。含まれているボックスが含まれているシステム要素でどのように接続されているかを説明することが非常に重要であることを指摘したように。
どちらのタイプのボックスも、入力配列、出力配列、およびcalculate（）などの一般的な操作として抽象化されます。システム要素には接続情報が含まれているため、より興味深い要素です。
この構造は間違いなく柔軟で拡張可能です。両方のグラフをこの構造で表すことができます。
この構造を表す図の正式な名前を検索しているときにこの投稿を見つけました。
このようなものはどうですか？これは複数の入力と出力を表示するためのかなり明確で興味深い方法のようですが、あなたからの例がなければ、それがデータ型で機能するかどうかを知ることは困難です。
幅の広いツリーと長いツリーがある場合、画像の周囲に明確な境界線がある限り、常にスクロール可能にすることができます。これにより、ユーザーは、左側または右側に現在見えていないものがあることを認識できます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
